Using group-hover with a css child selector

[janhoeck]

I am using tailwind together with ReactJS. In my application I am using a shared CustomButton component.
The JS code of this button looks like this:

export const CustomButton = () => {
...
<button>
   <span>...</button>
   <svg>...</svg>
</button>

I am able to use this component wherever I want, but I am not able to touch this component!

My task now is to add a specific hover style to this button.
When hovering the button, I want to style the span and the svg.
But the restriction is: It is just possible to add a class to the button root node when using CustomButton.

So I have tried the following implementation:

export const MyTestComponent = () => {
    return (
         <CustomButton className="group [&_svg]:group-hover:fill-blue-400 [&_span]:group-hover:text-blue-400" />
    )
}

Unfortunately this isn't working. All the documentation I could find only described that I have to set the group-hover to the direct child. Is there a workaround for my issue ?

[andymccray]

Hi @janhoeck,

This should do the trick: https://play.tailwindcss.com/g4y7m49VFw :)

<button class="group [&:hover_span]:text-red-200">
  <span>Child</span>
</button>

Cheers,
Andy

[janhoeck]

Thanks @andymccray, this is indeed working! This would also mean I don't need the group class anymore.
Unfortunately a following issue occurred. I also want to add an active style besides to the hover style. But the active style will never be applied if I am still hovering.
How can I change the priority for your solution ?

Playground: https://play.tailwindcss.com/yEGGS7O1Su

[andymccray]

No worries @janhoeck! You can chain those modifiers for the active state, e.g. [&:active:hover_svg]:text-red-400.