# tailwindcss-pseudo-elements

> TailwindCSS Plugin that adds variants of pseudo elements.

Latest version **2.0.0** (published 2021-04-06) · MIT license · 0 weekly downloads

## Install

```sh
npm install tailwindcss-pseudo-elements
pnpm add tailwindcss-pseudo-elements
yarn add tailwindcss-pseudo-elements
bun add tailwindcss-pseudo-elements
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.0 |
| Published | 2021-04-06 |
| First published | 2019-03-31 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 16.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 117 |
| Author | @croutonn |
| Maintainers | yutahaga, croutonn |
| Keywords | tailwindcss |

## Links

- npm: https://www.npmjs.com/package/tailwindcss-pseudo-elements
- Repository: https://github.com/croutonn/tailwindcss-pseudo-elements
- Homepage: https://github.com/croutonn/tailwindcss-pseudo-elements#readme
- Issues: https://github.com/croutonn/tailwindcss-pseudo-elements/issues
- npm.io page: https://npm.io/package/tailwindcss-pseudo-elements

## Alternatives

- [@sveltejs/kit](https://npm.io/package/@sveltejs/kit.md) — 2.2M weekly downloads
- [@tangle-network/brand](https://npm.io/package/@tangle-network/brand.md) — 10.0K weekly downloads
- [seneca](https://npm.io/package/seneca.md) — 7.4K weekly downloads
- [@bsb/base](https://npm.io/package/@bsb/base.md) — 7.2K weekly downloads
- [@modern-js/plugin-swc](https://npm.io/package/@modern-js/plugin-swc.md) — 3.4K weekly downloads

## Recent versions

- 2.0.0 (latest) — 2021-04-06
- 1.5.1 — 2020-12-09
- 1.5.0 — 2020-12-07
- 1.4.1 — 2020-11-08
- 1.4.0 — 2020-10-25
- 1.3.0 — 2020-09-28
- 1.2.0 — 2020-09-28
- 1.1.2 — 2019-10-25
- 1.1.1 — 2019-07-06
- 1.1.0 — 2019-07-05
- 1.0.0 — 2019-03-31

## README

# tailwindcss-pseudo-elements <!-- omit in toc -->

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

---

- [Getting Started](#getting-started)
  - [Install](#install)
    - [NPM](#npm)
    - [Yarn](#yarn)
  - [Write the configuration for the plug-in](#write-the-configuration-for-the-plug-in)
  - [Set the variants](#set-the-variants)
  - [Write the HTML](#write-the-html)
    - [Content Property Utilities](#content-property-utilities)
    - [Empty Property Utility](#empty-property-utility)
- [Options](#options)
  - [`customPseudoClasses` and `customPseudoElements`](#custompseudoclasses-and-custompseudoelements)
  - [`contentUtilities`](#contentutilities)
  - [`emptyContent`](#emptycontent)
  - [`classNameReplacer`](#classnamereplacer)
- [Recommended](#recommended)
  - [tailwindcss-aspect-ratio](#tailwindcss-aspect-ratio)

---

## Getting Started

### Install

#### NPM

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

#### Yarn

```sh
yarn add tailwindcss-pseudo-elements -D
```

### Write the configuration for the plug-in

Pass [the option](#options) object to the plug-in as follows:

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

### Set the variants

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

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

### Write the HTML

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

#### Content Property Utilities

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

Mark it up as follows:

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

#### Empty Property Utility

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

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

## Options

### `customPseudoClasses` and `customPseudoElements`

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

type: `string[]`  
default: `[]`

### `contentUtilities`

Configuration of [the Content Property Utilities](#content-property-utilities).

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

### `emptyContent`

Whether to generate [the Empty Property Utility](#empty-property-utility).

type: `boolean`
default: `true`

### `classNameReplacer`

You can replace frequently used class names with different names.

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

## Recommended

### tailwindcss-aspect-ratio

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

---
_Source: https://npm.io/package/tailwindcss-pseudo-elements · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._