Group Hover in Tailwind CSS

Group Hover in Tailwind CSS is a powerful utility that allows you to change the styles of child elements when their parent element is hovered over. This feature is particularly useful for creating interactive UI components without writing custom CSS.

Basic Example

Put group in the parent element and group-hover: in all the child elements where you want the style on hover, everything else will be taken care of.

<div className="flex  justify-center items-center">
  <div className="group flex gap-4 p-6 border rounded-lg cursor-pointer">
    <div className="w-16 h-16 bg-gray-300 group-hover:bg-red-500 group-hover:scale-110 transition-all duration-300"></div>
    <div className="w-16 h-16 bg-gray-300 group-hover:bg-green-500 group-hover:scale-110 transition-all duration-300"></div>
    <div className="w-16 h-16 bg-gray-300 group-hover:bg-blue-500 group-hover:scale-110 transition-all duration-300"></div>
  </div>
</div>

• Live Preview:

• If you want to exclude the scaling effect from the 3rd child element, simply omit the group-hover:scale-110 class from it.

• If you want to exclude the color change effect from the 2nd child element, simply omit the group-hover:bg-green-500 class from it.

Final Thoughts

The group-hover utility in Tailwind CSS simplifies hover-based styling by allowing child elements to react to their parent’s state. This feature is particularly useful for creating dynamic UI elements without writing custom CSS.

Start using group-hover in your projects and make your interfaces more interactive with minimal effort! 🚀