tailwindcss icon indicating copy to clipboard operation
tailwindcss copied to clipboard

Published 20 hours ago • verified publisher icon tailwindlabs

group not working in conjunction to data selectors?

Open herzaso opened this issue 1 year ago • 4 comments

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?

herzaso avatar Apr 07 '24 14:04 herzaso

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.

wongjn avatar Apr 07 '24 15:04 wongjn

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

herzaso avatar Apr 07 '24 17:04 herzaso

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

brandonmcconnell avatar Apr 09 '24 16:04 brandonmcconnell

Not sure if related? https://github.com/tailwindlabs/tailwindcss/issues/13523

johtso avatar Apr 14 '24 13:04 johtso