How to nest groups in TailwindCSS

A simple plugin to enable nested groups in your TailwindCSS project

UpdatedDecember 30, 2022

•3 min read•View as Markdown

Linus Benkner

Hey there, I'm a young developer building software on the web. Currently building snippet.land and Tubitor.

Comments (1)

Join the discussion

Graeme Fulton3y ago

Hey thanks for this. I just tried it, but the group-scope classes don't do anything for me. Same issue as the tailwind play example - looking into it!

Graeme Fulton3y ago

yay got it working by following the instructions in the npm page

this part, adding jit and the group names:

mode: "jit",
    // ...
    plugins: [
        require("tailwindcss-scoped-groups")({
            groups: ["one", "two"],
        }),
    ],

thanks for the great plugin!

Linus Benkner3y ago

Hi, thanks for your comment! This article is now outdated as nested groups have become a core feature of Tailwind CSS. Make sure you have Tailwind CSS version 3.2 installed and you can use it: https://tailwindcss.com/docs/hover-focus-and-other-states#differentiating-nested-groups You can find an updated version of the playground example here: https://play.tailwindcss.com/IqzVJD0rLe

Graeme Fulton3y ago

ooh thanks a lot! Didn't know it existed, your post was one of the first I found when searching Linus Benkner

More from this blog

Exploring Inheritance in PHP

Harnessing Object-Oriented Techniques: A Deep Dive into PHP Class Inheritance

Dec 16, 20246 min read

WordPress Is in an Alarming State

Matt Mullenweg wasn't lying when he said he would go "nuclear" against WP Engine. But his attack expanded beyond WP Engine and now hits the entire WordPress ecosystem. What has started as an attempt to get WP Engine to pay a trademark license to Auto...

Oct 12, 20244 min read

Deep Dive into Classes and Objects in PHP

Understanding Classes in PHP for Better Code Structure

Jun 21, 20248 min read

Deep Dive into Classes and Objects in PHP

Introduction to Object-Oriented Programming (OOP) in PHP

Transform Your PHP Code with the Power of Object-Oriented Programming

Jun 12, 20248 min read

Introduction to Object-Oriented Programming (OOP) in PHP

How to Create QR Codes In Laravel 11

Create and Store QR Codes in Laravel 11 Using the Laravel QR Code Package

Apr 28, 20245 min read

linu.us Developer blog by Linus Benkner

16 posts

Hey there, my name is Linus and I'm a young developer building software on the web.

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>

And that's it - a simple but effective way to enable nested groups in TailwindCSS.

Thank you very much for reading this article 🤗 and have a nice day 🎉

Command Palette

Comments (1)

More from this blog

Groups in TailwindCSS

How groups work and why we can't nest them

How to enable nesting