tailwindcss-custom-groups

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: {
    // For example, `row` results in `group-row-`
    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.