tailwindcss-custom-groups
[!IMPORTANT]
As of version 3.2, Tailwind CSS now offers named groups natively.
Out of the box, Tailwind CSS comes with a group-
utility that's used for styling elements depending on the state of their parents.
The plugin right here lets you generate custom group utilities in the form of group-*-
, where *
represents an arbitray name.
Use Cases
In most scenarios, the default group-
utility works just fine. As your app grows in complexity, however, you might find yourself looking for solutions to needs such as:
- Nesting several
group-
utilities - Styling depending on a particular parent further up in the tree, not just the closest
group-
user - More descriptive
group-
labels if many are used in the same component
If so, this plugin will help you.
Setup
First, install the plugin:
npm install tailwindcss-custom-groups --save-dev
Then add the plugin to your Tailwind CSS config file:
theme: {
customGroups: {
names: ['row']
}
},
plugins: [
require('tailwindcss-custom-groups')
]
Additional Options
To avoid too much CSS being generated, every new group-*-
utility only supports a small list of pseudo-classes.
If you'd like to generate different ones, you can replace the defaults with customGroups.variants
:
variants: {
'odd': 'nth-child(odd)'
}
Credits
The package is based on this comment by @maelquerre, with various additions by @leo.