Group hover using tailwind css

#tailwindcss #webdev #css #html

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>

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.