tailwindcss-pseudo
v1.0.3
Published
Tailwind CSS plugin to generate pseudo selector variants.
Downloads
1,299
Readme
Pseudo Selector Plugin for Tailwind CSS
Installation
yarn add tailwindcss-pseudo
Usage
// tailwind.config.js
{
theme: {
backgroundColor: {
'black': 'black',
},
pseudo: { // defaults to {'before': 'before', 'after': 'after'}
'before': 'before',
'after': 'after',
'not-first': 'not(:first-child)',
}
},
variants: {
backgroundColor: ['not-first'],
empty: ['before', 'after'], // defaults to []
},
plugins: [
require('tailwindcss-pseudo')({
empty: true, // defaults to true
}),
],
}
This plugin generates the following utilities:
.bg-black {
background-color: black;
}
.not-first\:bg-black:not(:first-child) {
background-color: black;
}
.empty {
content: '';
}
.before\:empty::before {
content: '';
}
.after\:empty::after {
content: '';
}