tailwindcss-nested-groups

Tailwind CSS plugin that adds support nested groups to the group variant for any level deep by scoping them.

Installation

``sh


npm

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


#A.group-scope

#B.group-scope-hover

#C.group-scope

#D.group-scope-hover

#E.group-scope

#F

#G.group-scope-hover

This Plugin relies on CSS negation pseudo-class :not()`.