tailwindcss-scoped-groups

A scoped version of the group utility in TailwindCSS

Usage no npm install needed!

<script type="module">
  import tailwindcssScopedGroups from 'https://cdn.skypack.dev/tailwindcss-scoped-groups';
</script>

README

TailwindCSS scoped groups

This plugins adds the group-scoped utility. You can use it just like group with all it's features like group-hover, group-focus-within and all others, but the groups are scoped.

This allows you to nest groups - you just have to rename group to group-scoped!

Custom names

It's now also possible to create custom groups! Just create the names in your config file:

// tailwind.config.js
module.exports = {
    mode: "jit",
    // ...
    plugins: [
        require("tailwindcss-scoped-groups")({
            groups: ["one", "two"],
        }),
    ],
}

With this config, the groups group-one and group-two are also available.

Compatibility

This plugin is compatible with TailwindCSS versions 2.x and 3.x and the JIT compiler.

Currently, this plugin uses the old addVariant API that's also supported by version 3 in order to support projects with TailwindCSS version 2.

There's already a version with the new addVariant and I'll implement this in the near future.

Example

Compare the "normal" groups with scoped groups here: https://play.tailwindcss.com/d4W0wTCRnI