'Tailwindcss use hover over group-hover is not working

Tailwindcss use hover over group-hover is not working

I don't know why it's not working. I think this code is correct. But it is not change color. Always show black color.

<div className="flex items-center md:px-10 sm:h-14 md:hover:bg-gray-100 rounded-xl active:border-b-2 active:border-blue-500">
    <Icon className="h-5 text-center sm:h-7 group-hover:text-blue-500" />
</div>

tailwind.config.js

module.exports = {
  mode: 'jit',
  purge: ['./pages/**/*.{js,ts,jsx,tsx}','./components/**/*.{js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {
      divideColor: ['group-hover'],
      backgroundColor: ['group-focus'],
    }
  },
  plugins: [],
}

reactjs tailwind-css

Solution 1:^[1]

You need to give your parent element the class group for it to work.

Try this:

<div className="group flex items-center md:px-10 sm:h-14 md:hover:bg-gray-100 rounded-xl active:border-b-2 active:border-blue-500">
    <Icon className="h-5 text-center sm:h-7 group-hover:text-blue-500" />
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	dipenparmar12

'Tailwindcss use hover over group-hover is not working

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]