Nested groups in TailwindCSS

Update: This article is now outdated as nested groups have become a core feature of Tailwind CSS 3.2.
👉 Official docs: https://tailwindcss.com/docs/hover-focus-and-other-states#differentiating-nested-groups
👉 Playground example: https://play.tailwindcss.com/IqzVJD0rLe

If you're using TailwindCSS in your projects, I'm pretty sure you're familiar with the group utilities. If you're not, here is a quick overview:

Groups in TailwindCSS

When working with TailwindCSS, you use a bunch of classnames to style your HTML elements. But imagine you have a card element and want to change elements inside when hovering over the card. You can't just use the hover utility, because this only applies when you hover over the element you applied the class to.

That's where groups come into play. You add the group class to the parent element and use group-hover (or group-focus, group-active, ...) on the child elements. The group-hover variant applies, when you hover over the parent element with the group class.

How groups work and why we can't nest them

To understand why we can't nest groups in TailwindCSS, we first need an overview on how the group utility actually works. For example, the class group-hover:underline generates this CSS code:

.group:hover .group-hover\:underline {
     text-decoration: underline;
}

I guess it's pretty clear why we can't nest groups. The text-decoration property applies to our element, when it's inside any group with the hover state.

Here is an example with two nested boxes with the group utility:

<div class="p-4 group bg-yellow-200">
     <span class="group-hover:underline">Hello world</span>
     <div class="p-4 group bg-yellow-400">
          <span class="group-hover:underline">Hello world</span>
     </div>
</div>

You can test it out here on the TailwindCSS playground. But notice how both texts are underlined when hovering over a box.

How to enable nesting

There are a few packages out there claiming to solve this issue, but all of the packages I tested were outdated or incompatible with the new JIT compiler. That's why I started building my own package to solve this problem. You can install it via NPM and add it to your tailwind.config.js:

npm i tailwindcss-scoped-groups

module.exports = {
  // ...
  plugins: [
    require("tailwindcss-scoped-groups"),
  ],
  // ...
}

This plugin adds a new utility called group-scoped. You can use it just as you'd use the default group utility, but use group-scoped instead of group (e.g. group-scoped-hover:underline).

I've created an example on the TailwindCSS playground, check it our here .

That's how our example above would look like with this plugin:

<div class="p-4 group-scoped bg-yellow-200">
     <span class="group-scoped-hover:underline">Hello world</span>
     <div class="p-4 group-scoped bg-yellow-400">
          <span class="group-scoped-hover:underline">Hello world</span>
     </div>
</div>