A TailwindCSS plugin that adds custom groups.
npm install @vendeka/tailwindcss-custom-groupssh
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?
``