TailwindCSS group modifier is very helpful in various situations and can minimize a lot of JavaScript code. With the help of a group modifier, you can design hover dropdown menus, a simple tooltip, and a lot more. In this post, you’ll learn almost everything to use group modifiers in TailwindCSS.
What Does Group Hover Modifier Do in TailwindCSS?
The group class allows you to change the style of any child element when any other element hovers in the group. For example, if a div container has a group
class and somewhere in the div
element you have a button. Now, you want to change the button style when any element of the group
container hovers.
How to Use Group Hover Modifier in TailwindCSS
The most common use case where you need a group
class is to use with hover
modifier. There are many different things you can do by combining hover
modifier with group
class. Let’s say you want to change the style of a heading inside a div
container whenever a user hovers over the element. The following example changes the heading and paragraph style and adds underline
class when any part of the div
container hovers.
1 2 3 4 5 6 7 8 |
<div class="group block max-w-xs mx-auto cursor-pointer rounded-lg p-6 bg-white shadow-lg space-y-3 "> <h3 class="group-hover:underline font-semibold">Google Analytics</h3> <p class="text-slate-500 text-sm group-hover:underline">Google analytics allows you to track trafific.</p> </div> |
Please check the working example and see the output screenshot below.
According to the documentation, you can use the group
class with focus
, active
and other states.
Conclusion
By using group
class, you can modify the style of child elements inside the group container with group-hover
. There are many use cases for the group
class with group-hover
like designing a tooltip, creating a hover dropdown menu, etc.