Group-hover" not working in Tailwind (even w/defaults)

Programming
,
1

I’m trying to change the text color on hover of the parent div using Tailwind’s group-hover feature, but it is not working.

Below is my code, which I am using with React:

<div class="group">
   <div>
     <div class="group-hover:text-blue">Hover me</div>
     <div class="group-hover:text-red">Hover me</div>
   </div>
</div>

I have also tried setting the variants property in tailwind.config.js as follows, but I still cannot get the group-hover feature to work:

module.exports = {

  // ...

   variants: {
   textColor: ['group-hover', 'hover'],
 }
  // ...
}

textColor: ['responsive', 'dark', 'group-hover', 'focus-within', 
 'hover', 'focus'],

 textColor: ['group-hover'],

Can someone please help me understand why the group-hover feature is not working?

2

The issue might be with the configuration in your tailwind.config.js file. To make the group-hover feature work, you need to enable the group-hover variant for the textColor utility in the variants section of your tailwind.config.js file.

Here’s the correct configuration you should use:

module.exports = {
  // ...
  variants: {
    extend: {
      textColor: ['group-hover'],
    },
  },
  // ...
}

Make sure to restart your development server after making this change. Now, the group-hover feature should work as expected, and you should see the text color changing on hover of the parent div.