TailwindCSS Plug-in that adds variants of pseudo elements (::before, ::after, ::first-letter, etc.).

• Getting Started
  • Install
    • NPM
    • Yarn
  • Write the configuration for the plug-in
  • Set the variants
  • Write the HTML
    • Content Property Utilities
    • Empty Property Utility
• Options
  • customPseudoClasses and customPseudoElements
  • contentUtilities
  • emptyContent
  • classNameReplacer
• Recommended
  • tailwindcss-aspect-ratio

npm install tailwindcss-pseudo-elements --save-dev

yarn add tailwindcss-pseudo-elements -D

Pass the option object to the plug-in as follows:

module.exports = { plugins: [ require('tailwindcss-pseudo-elements')({ customPseudoClasses: ['foo'], customPseudoElements: ['bar'], contentUtilities: false, emptyContent: false, classNameReplacer: { 'hover:before:text-black': 'hbt', }, }), ], }

Naming convention of the variants is like pseudo-class:pseudo-class::pseudo-element.
An example configuration is shown below.

module.exports = { variants: { extend: { textColor: [ 'responsive', 'hover', 'focus', 'before', 'after', 'hover::before', 'hover::after', 'focus::before', 'checked:hover', 'checked:hover::before', ], }, }, }

<div class="relative  before:aspect-ratio-4/3  hover:before:aspect-ratio-1/1  before:empty-content" > <img class="absolute pin w-full h-full" src="..." /> </div>

There are utilities that set the attributes of HTML elements to the content property.

Mark it up as follows:

<p class="content-before content-after content-hover-before" tw-content-before="🧡" tw-content-hover-before="💖" tw-content-after="💙️" > Tailwind CSS </p>

NOTE: If you encounter problems with AMP Validation, you can work around them by setting the prefix with the contentUtilities option.

There is a utility class that sets { content: "" } in the ::before.

<p class="before:empty-content"></p>

You can set up your own pseudo-classes and pseudo-elements.

type: string[]
default: []

Configuration of the Content Property Utilities.

type: boolean | { "prefix": string }
default: { "prefix": "tw-content" }

Whether to generate the Empty Property Utility.

type: boolean default: true

You can replace frequently used class names with different names.

type: Record<string, string>
default: {}

 plugins: [ require('tailwindcss-pseudo-elements')(pseudoOptions), require('tailwindcss-aspect-ratio')({ ratios: { '16/9': [16, 9], '4/3': [4, 3], '3/2': [3, 2], '1/1': [1, 1], }, variants: ['before', 'hover::before', 'responsive'], }), ], }