Tailwind CSS plugin that adds nested groups
npm install tailwindcss-nested-groupsTailwind CSS plugin that adds support nested groups to the group variant for any level deep by scoping them.
``shnpm
npm install tailwindcss-nested-groups --save-dev
Configuration
Add the plugin to the
plugins array of the tailwind config file. `js
// tailwind.config.js
module.exports = {
// ... plugins: [
// ...
require("tailwindcss-nested-groups"),
],
};
`Optionally set your group scope and choose variants in the config (no need to type
group-, that will be prepended for you).`js
// tailwind.config.js
module.exports = {
theme: {
// ...
groupLevel: 10,
// will result in as many direct child selectors as defined here
groupScope: "scope",
// will result in group-scope being available in addition to the base group
groupVariants: ["hover", "focus"],
// will result in group-scope:hover and group-scope:focus variants
},
// ...
};
`Make sure that your variants are enabled.
- See Tailwind V2 variants and
group-hover/group-focus
- See Tailwind V1 variants and group-hover/group-focus`js
// tailwind.config.js
module.exports = {
// ...
variants: {
// Now you can use nested groups for example in backgroundColor and textColor for hover and focus
backgroundColor: ['responsive', 'hover', 'focus', 'group-hover', 'group-focus'],
textColor: ["responsive", "hover", "focus", "group-hover", "group-focus"],
},
};
`Usage
Use the
.group-scope alternative (you can play with it here):`html
Example 1
New Project
Create a new project from a variety of starting templates.
Example 2
#A.group-scope
#B.group-scope-hover
#C.group-scope
#D.group-scope-hover
#E.group-scope
#F
#G.group-scope-hover
`Will look like or live edit here:
Disclaimer
This Plugin relies on CSS negation pseudo-class
:not()`.