DEV Community

Cover image for Group hover using tailwind css
Aastha Pandey
Aastha Pandey

Posted on

Group hover using tailwind css

Alt Text of image
When I came across this thing where every other element was behaving differently when we hover, I didn't even know what do we call it and how to search it, after trying several keywords, I finally got the idea of what's happening and tried to write the css from scratch, it became tedious for me to maintain the color, background-color, border-color and many more styles for every single child element.
Got Group-hover from tailwindcss and used it effortlessly.
Put group in the parent element and group-hover: in all those child elements where we want the style on hover, everything else will be taken care of.
The code will look something like this:-

      <div className=' flex h-screen justify-center items-center'>
        <div className='group text-xl'>
          <strong className='group-hover:text-red-500'>Hover on me </strong>
          <strong className='group-hover:text-green-500'>the texts will be </strong>
          <strong className='group-hover:text-blue-500'>of different colors</strong>

Enter fullscreen mode Exit fullscreen mode

No configuration is required in the tailwind.config.js file unless one is trying to apply group-hover on some plugin that needs to be enabled in the variants of the config file.

Top comments (7)

designbyalabi profile image
AbdulKareem Alabi

awesome content, thanks so much for sharing

subarnabsadhukhan profile image

I have found what I was looking for.

lemmecode profile image


orevatj profile image

Thank you so much.

sanneh22 profile image

I always forget this one! I forget the details, but knowing it exists has proven to be useful again and again. Great feature. Thanks

sachinrajput9313 profile image
Sachin Rajput

Great job

nadim_ch0wdhury profile image
Nadim Chowdhury

very useful