group not working in conjunction to data selectors?
herzaso opened this issue · 5 comments
herzaso commented
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 commented
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.
brandonmcconnell commented
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>