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 (0)

Thank you.

Β 
Thanks for visiting DEV, we’ve worked really hard to cultivate this great community and would love to have you join us. If you’d like to create an account, you can sign up here.