Tailwind group hover explained

One of the most useful features in tailwind for creating interactive and engaging front-end web experiences is group hovers.

Group hovers allow you to easily and simply create hover events that detect and work across a subsection of your page. This is challenging to do in vanilla CSS, as it involves creating multiple nested clauses. However, once you understand how Tailwind groups work and how to combine them with group hover this becomes simple, clean and easy.

Take the example below, when the user hovers anywhere in the word the whole section changes to a beautiful rainbow of colours.

Lets start with a simple text string broken down with multiple spans, each representing a different colour in the soon to be rainbow.

<p>
    <span id="red">Richard</span>
    <span id="orange">Of</span>
    <span id="yellow">York</span>
    <span id="green">Gave</span>
    <span id="blue">Battle</span>
    <span id="indigo">In</span>
    <span id="violet">Vain</span>
</p>

Now in the CSS you could create a clause for each of these Ids and detect hover to implement the colour change. But this would only change each word one at a time - what if you want to make the whole string rainbow at the same time?

To do this you need to add hover detection on the parent <p> element, and then access each of the <span> elements within it. While this works, if you are working with lots of different elements, all doing different things, it can quickly become long and difficult to maintain.

p:hover #red {
  color: red;
}
p:hover #orange {
  color: orange;
}
p:hover #yellow {
  color: yellow;
}
p:hover #green {
  color: green;
}
p:hover #blue {
  color: blue;
}
p:hover #indigo {
  color: indigo;
}
p:hover #violet {
  color: violet;
}

You could use SCSS, which allows use to nest all of the children tags within a single copy of the parent. But, better still you can use Tailwind groups.

In Tailwind, you start by defining the group. You can do this by adding the group class to the parent - in this case this is the <p> tag.

<p class="group"><span id="red">Richard</span>...</p>

Then you call group-hover class within each of the children classes, combined with what styles should be applied on hover.

<p class="group"><span id="red" class="group-hover:text-red-500">Richard</span>...</p>

You can now clean up your HTML and remove the unnecessary IDs, leaving us with just the following.

<p class="group">
    <span class="group-hover:text-red-500">Richard</span>
    <span class="group-hover:text-orange-500">Of</span>
    <span class="group-hover:text-yellow-500">York</span>
    <span class="group-hover:text-green-500">Gave</span>
    <span class="group-hover:text-blue-500">Battle</span>
    <span class="group-hover:text-indigo-500">In</span>
    <span class="group-hover:text-violet-500">Vain</span>
</p>

But what is you want to nest hover interactions - for example, if you wanted “york gave battle” to also be all different sizes when hovered on? Well this is just as easy using group names. Simply follow the same steps, but label your new group with a concise name. You can do this with the slash syntax, so to name a group ‘bigger’ use group/bigger .

<p class="group">
    <span class="group-hover:text-red-500">Richard</span>
    <span class="group-hover:text-orange-500">Of</span>
    <span class="group/bigger">
        <span class="group-hover:text-yellow-500 group-hover/bigger:text-lg">York</span>
        <span class="group-hover:text-green-500 group-hover/bigger:text-xl">Gave</span>
        <span class="group-hover:text-blue-500 group-hover/bigger:text-lg">Battle</span>
    <span>
    <span class="group-hover:text-indigo-500">In</span>
    <span class="group-hover:text-violet-500">Vain</span>
</p>

You can check out both these working examples in tailwind playground [here].

Or have a look at a more realistic use of group hover on an example card [here].

---

Thanks for reading!

What other cool features of Tailwind do you like to use? Let me know in the comments, or just say hi 👋.

Until next time, Happy Coding!

---

To learn more about this topic, I recommend reading the Tailwind documentation:

• https://tailwindcss.com/docs/hover-focus-and-other-states