-
Notifications
You must be signed in to change notification settings - Fork 4.2k
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
Invalid CSS generated for class like [&>&]:before:XXX
#13877
Comments
Hey thanks, we can definitely fix this (and it's already fixed in the v4 engine)! I am curious though what the hell you are trying to do in a real project where you are using two |
Thanks! I'm trying to style a tree-like shape where items can be one after another, or nested. This specific style is very helpful to design the tree borders and handle the case of nesting and siblings without any code. |
Got it! In your particular case, rearranging the variants to the correct order solves the problem: https://play.tailwindcss.com/7ZU3MP4OnX In v3, variants are applied inside out, so the variant on the right is applied first so you want https://tailwindcss.com/docs/hover-focus-and-other-states#ordering-stacked-modifiers For legacy reasons we have some special logic in place to try and hoist pseudo elements like To make thing's slightly worse this is the one significant breaking change we're planning for v4 because it surprises basically everyone, so in v4 variants will be applied from left-to-right which I think is a lot more intuitive. We'll provide a codemod for this though so it'll be an easy upgrade 👍 |
What version of Tailwind CSS are you using?
For example: v3.4.4
Reproduction URL
https://play.tailwindcss.com/nQleJ1grpC
Describe your issue
When using a class like
[&>&]:before:content-['']
the generated CSS output contain invalid class with::before::before
instead of only one::before
:The same apply for classes like
[&+&]:before:XXX
.The text was updated successfully, but these errors were encountered: