TailwindCSS named groups
TailwindCSS plugin that adds named groups to the group variant. This is handy if you have nested groups hovers.
Installation
# npm
npm install tailwindcss-named-groups --save-dev
# yarn
yarn add --dev tailwindcss-named-groups
Add the plugin to the plugins
array of the tailwind config file.
// tailwind.config.jsmoduleexports = // ... plugins: // ... ;
Then create your named groups in the config (no need to type group-, that will be prepended for you).
// tailwind.config.jsmoduleexports = theme: // ... namedGroups: "foo" "bar" // will result in group-foo and group-bar being available in addition to the base group // ...;
Usage
Having the named groups as foo
and bar
:
New Project Create a new project from a variety of starting templates.
Will result into this:
Extra
group-focus
is also supported.
This plugin respects the group-hover and group-focus variants, so you must have them enabled where you want to use named groups:
// tailwind.config.jsmoduleexports = // ... variants: // Now you can use named groups in textColor for hover and focus textColor: "responsive" "hover" "focus" "group-hover" "group-focus" ;