tailwindcss-pseudo-elements
v2.0.0
TailwindCSS Plugin that adds variants of pseudo elements.
0/weekUpdated 3 years agoMITUnpacked: 16.6 KB
Published by @croutonn
npm install tailwindcss-pseudo-elementstailwindcss-pseudo-elements
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
---
Getting Started
$3
#### NPM
``sh`
npm install tailwindcss-pseudo-elements --save-dev
#### Yarn
`sh`
yarn add tailwindcss-pseudo-elements -D
$3
Pass the option 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',
},
}),
],
}
$3
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',
],
},
},
}
$3
`html
before:aspect-ratio-4/3
hover:before:aspect-ratio-1/1
before:empty-content"
>
`
#### Content Property Utilities
There are utilities that set the attributes of HTML elements to the content property.
Mark it up as follows:
html
tw-content-before="🧡"
tw-content-hover-before="💖"
tw-content-after="💙️"
>
Tailwind CSS
`#### Empty Property Utility
There is a utility class that sets
in the ::before.`html
`Options
$3
You can set up your own pseudo-classes and pseudo-elements.
type:
default: []$3
Configuration of the Content Property Utilities.
type:
default: { "prefix": "tw-content" }$3
Whether to generate the Empty Property Utility.
type:
default: $3
You can replace frequently used class names with different names.
type:
default: {}Recommended
$3
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'],
}),
],
}
``