npm package: @shimyshack/tailwindcss-pseudo-element-plugin
Description: A plugin that provides `before` and `after` variants as well as `pseudo-content-{value}` utility classes to Tailwind CSS.
Latest version: 1.0.4

# @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:

```sh
# 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:

```js
// 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:

```js
// 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:

```html
<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:

```html
<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:

```html
<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:

```html
<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:

```html
<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:

```html
<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.

```js
// 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'],
  }
}
```