@shimyshack/tailwindcss-pseudo-element-plugin

A plugin that provides before and after variants as well as pseudo-content-{value} utility classes to Tailwind CSS.

Installation

Install the plugin from npm:

# Using npm
npm install @shimyshack/tailwindcss-pseudo-element-plugin

# Using Yarn
yarn add @shimyshack/tailwindcss-pseudo-element-plugin

Then add the plugin to your tailwind.config.js file:

// tailwind.config.js
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('@shimyshack/tailwindcss-pseudo-element-plugin'),
    // ...
  ],
}

Usage

Use the before and after variants to style the ::before and ::after pseudo elements.

Note: Remember to enable the variants for your specific use cases if not using Tailwind's JIT mode. For example:

// tailwind.config.js
module.exports = {
  variants: {
    extend: {
      display: ['before', 'after'],
      textColor: ['before', 'after'],
      fontSize: ['before', 'after'],
      backgroundColor: ['before', 'after'],
      margin: ['before', 'after'],
    }
  },
}

Use with plugin options

.pseudo-content-both with [data-pseudo-content-both] example:

<div
  data-pseudo-content-both="both"
  class="before:pseudo-content-both after:pseudo-content-both"
>...</div>

.pseudo-content-before and .pseudo-content-after with [data-pseudo-content-before] and [data-pseudo-content-after] example:

<div
  data-pseudo-content-before="before"
  data-pseudo-content-after="after"
  class="before:pseudo-content-before after:pseudo-content-after"
>...</div>

Use the pseudo-content-{value} utilities to specify the content of the pseudo element:

<label
  class="after:inline-block after:text-red-500 after:text-xs after:ml-1 after:font-bold after:pseudo-content-asterisk xl:after:pseudo-content-required"
>
  Field Name
</label>

Use with JIT

Use the pseudo-content-[value] utilities to specify the content of the pseudo element.

Spaces must be underscore characters:

<div class="before:block before:bg-red-500 before:pseudo-content-[Whatever_you_want_to_say]">
  ...
</div>

More Examples

An example of a punctuated list:

<ul class="inline-block">
  <li class="inline-block after:inline-block after:pseudo-content-comma after:mr-1">Item 1</li>
  <li class="inline-block after:inline-block after:pseudo-content-comma after:mr-1">Item 2</li>
  <li class="inline-block after:inline-block after:pseudo-content-oxford-ampersand after:mr-1">Item 3</li>
  <li class="inline-block">Item 4</li>
</ul>

An example of using a unicode character:

<div
  class="inline-block after:inline-block after:pseudo-content-[\b7] after:mx-1"
>...</div>

Configuration

The following code snippet shows the default pseudo-content-* options as well as the default variants generated for before and after.

You can configure which values are generated by using the pseudoContent key and you can configure which variants are generated by this plugin under the pseudoElements key in your tailwind.config.js file.

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      pseudoContent: {
        empty: '""',
        space: '" "',
        required: '"* required"',
        asterisk: '"*"',
        ampersand: '"&"',
        and: '"and"',
        'oxford-ampersand': '", &"',
        'oxford-and': '", and"',
        comma: '","',
        middot: '"\\b7"',
        mdash: '"\\2014"',
        bar: '"|"',
        gt: '">"',
        lt: '"<"',
        both: 'attr(data-pseudo-content-both)',
        before: 'attr(data-pseudo-content-before)',
        after: 'attr(data-pseudo-content-after)'
      }
    }
  },
  variants: {
    pseudoElements: ['responsive', 'before', 'after'],
  }
}