Custom groups for TailwindCSS

Need a fixed header after scrolling? Or perhaps you want to toggle classes upon clicking a button.

We got you covered. Just bring your own logic!

Installation

Install the plugin from GitHub:

``sh
npm install git+https://github.com/vendeka-nl/tailwindcss-custom-groups.git
`

Configuration

Add the plugin to your tailwind.config.js file. And define your custom groups using the customGroups option in your theme configuration in your configuration file.

`js
// tailwind.config.js
module.exports = {
theme: {
customGroups: [
'custom-group-name',
],
},
variants: {
extends: {
position: ['custom-group-name'],
}
},
plugins: [
require('@vendeka/tailwindcss-custom-groups'),
],
}
`

Usage

Use the group names defined in your Tailwind config as a variant in your HTML. Add the group class to the parent using your (frontend) framework of choice.

$3

In the example below we've added a custom group named toggled, which is configured as a variant on the text color utilities. When our button is clicked, the class "toggled" is toggled on the body element, which colors the text green.

`html

Toggled?

Toggle


``