Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

group not working in conjunction to data selectors? #13465

Open
herzaso opened this issue Apr 7, 2024 · 4 comments
Open

group not working in conjunction to data selectors? #13465

herzaso opened this issue Apr 7, 2024 · 4 comments

Comments

@herzaso
Copy link

herzaso commented Apr 7, 2024

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
Copy link
Contributor

wongjn commented Apr 7, 2024

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
Copy link
Author

herzaso commented Apr 7, 2024

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

@brandonmcconnell
Copy link
Contributor

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
Copy link

johtso commented Apr 14, 2024

Not sure if related? #13523

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants