Tailwind Parent Selector

Here's how to style a child based on a parent in Tailwind CSS.

Parent Class

There's a special Tailwind class called group. group is the class that identifies the parent. Put it on that parent node.

You can create special named groups too (eg, group/my-name). If you have nested groups, you might need that.

Child Class

Then a child can be styled in relation to its parent.

You can affect the child based on any pseudo class that could be applied to the parent. (eg group-hover:text-white makes this child text node white when the parent is hovered.)

You can affect the child based on the existence of another class on the parent node. (eg, group-[.success]:text-white makes this child text node white when the parent has the class success.)

Example Markup

In a single html example, you might have this:

<div class="toast group success">
  Wow, you really did it. Good job!
  <button class="text-white/50 group-[.success]:text-green/50 group-hover:text-white group-[.success]-hover:text-green">Dismiss</button>
</div>

For more, see the Tailwind docs, which you probably have on speed dial.