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>
        </div>
      </div>

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)

Collapse
 
designbyalabi profile image
AbdulKareem Alabi

awesome content, thanks so much for sharing

Collapse
 
subarnabsadhukhan profile image
SUBARNAB SADHUKHAN

I have found what I was looking for.

Collapse
 
lemmecode profile image
Lemme.code

Thanks!

Collapse
 
orevatj profile image
OrevaTJ

Thank you so much.

Collapse
 
sanneh22 profile image
Sanel

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

Collapse
 
sachinrajput9313 profile image
Sachin Rajput

Great job

Collapse
 
nadim_ch0wdhury profile image
Nadim Chowdhury

very useful