Can't get Pseudo-Class Variants 'group-hover' or 'group-focus' working

[marcmll]

Hey there,
I am currently starting out with tailwind and wanted to try using the group-hover and group-focus pseudo-class variants. No matter what I try, or how often I read through the documentation, I can't seem to get them working. Even if I enable all variants it doesn't seem to function.

Am I missing something? Currently, my tailwind.config.js looks as follows:

// tailwind.config.js
module.exports = {
  variants: {
    textColor: ['responsive', 'hover', 'group-hover', 'focus'],
  },
}

In the example below I am trying to add group-hover to an input to change the textColor:

<input
  className='px-4 py-2 w-full border border-gray-200 rounded group-hover:text-red-500'
  placeholder='Search...'
  autoComplete='none' />

Thanks in advance for the help!

[estevanmaito]

Did you add group to the parent element?

https://tailwindcss.com/docs/pseudo-class-variants/#group-hover

[marcmll]

🤦‍♂️ Can't believe I missed that... thanks so much for the quick response!