npm install tailwindcss-interaction-variants// tailwind.config.js
{
theme: {
backgroundColor: {
'black': 'black',
},
},
variants: {
backgroundColor: ['group-focus', 'group-focus-within', 'group-active', 'group-visited', 'group-disabled', 'hocus', 'group-hocus'],
},
plugins: [
require('tailwindcss-interaction-variants')(),
],
}The above configuration would generate the following CSS:
.bg-black {
background-color: black;
}
.group:focus .group-focus\:bg-black {
background-color: black;
}
.group:focus-within .group-focus-within\:bg-black {
background-color: black;
}
.group:active .group-active\:bg-black {
background-color: black;
}
.group:visited .group-visited\:bg-black {
background-color: black;
}
.group:disabled .group-disabled\:bg-black {
background-color: black;
}
.hocus\:bg-black:hover, .hocus\:bg-black:focus {
background-color: black;
}
.group:hover .group-hocus\:bg-black, .group:focus .group-hocus\:bg-black {
background-color: black;
}