Tailwindcss plugin for :first-line

This Tailwind plugin implements the CSS :first-line pseudo-element

Installation

npm install --save-dev @netlify/tailwindcss-first-line

or

yarn add -D @netlify/tailwindcss-first-line

Usage

// tailwind.config.js

module.exports = {
    ...
    plugins: [
        require('@netlify/tailwindcss-first-line'),
        ...
    ]
}

Then, add the first-line variant to each property you'd like to use it with.

    textColor: [
      'responsive',
      'hover',
      'focus',
      'first-line',
    ],

You can then use it by preprending first-line: to your classes, like first-line:your-class.

For example, to change the color of the first line of a paragraph to white, you would write first-line:text-white.

If you have a prefix set in your config (e.g. tw), you would use the following syntax: first-line:tw-text-white.

:first-line only applies to block-level elements.