# How to nest 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](https://tailwindcss.com/docs/hover-focus-and-other-states#differentiating-nested-groups)
👉 Playground example: [https://play.tailwindcss.com/IqzVJD0rLe](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](https://tailwindcss.com/docs/hover-focus-and-other-states#group-hover) 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:
```css
.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:
```html
```
You can test it out [here on the TailwindCSS playground](https://play.tailwindcss.com/YSYnEj7mlB). 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`:
```bash
npm i tailwindcss-scoped-groups
```
```js
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](https://play.tailwindcss.com/8ednkXaT9F) .
That's how our example above would look like with this plugin:
```html
```
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 🎉**
%%[bmac]