group not working in conjunction to data selectors?

[herzaso]

Version 3.4.3
Reproduction URL: https://play.tailwindcss.com/5PGfLBp9gF
(Move focus with TAB and notice that the background color doesn't change. If you remove either the group-focus or the data selector it does work)

Am I doing something wrong?

[wongjn]

For what it's worth, it seems like the single quotes in the class name stop the proper generation of the class name.

Removing the quotes around the attribute value or swapping the order of the variants seems to make it work, https://play.tailwindcss.com/FWM5GF8fXg.

[herzaso]

@wongjn It's worth a lot. Thanks for the workarounds!

[brandonmcconnell]

Fyi this affects double quotes as well. Noting this here so when a fix is introduced, it resolves all affected cases.

<div class="group" tabIndex="0">
  <div class='group-focus:data-[active="true"]:bg-red-600' data-active="true">
    Hello
  </div>
</div>

https://play.tailwindcss.com/AfuIxkCWtP

[johtso]

Not sure if related? #13523

[RobinMalfait]

Hey!

Looks like this works in the latest v3 and v4 versions:

• v3: https://play.tailwindcss.com/5PGfLBp9gF
• v4: https://play.tailwindcss.com/utAslADrXS

Going to close this since this works as expected now 👍