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!
Install the plugin from NPM:
npm install @vendeka/tailwindcss-custom-groupsAdd 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.
// tailwind.config.js
module.exports = {
theme: {
customGroups: [
'custom-group-name',
],
},
variants: {
extends: {
position: ['custom-group-name'],
}
},
plugins: [
require('@vendeka/tailwindcss-custom-groups'),
],
}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.
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.
<body>
<div class="text-gray-400 toggled:text-green-500">Toggled?</div>
<button type="button">Toggle</button>
<script type="text/javascript">
document.querySelector('button').addEventListener('click', () => {
document.body.classList.toggle('toggled');
});
</script>
</body>