-
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
Combination of TW JS based config and a class causes malformed CSS #12111
Comments
@robdekort I suspect the actual intention here is to have You can use the following as a workaround which works today (or see it on Tailwind Play): addComponents({
'.outer-grid': {
'@screen md': {
'&>*:last-child:is([class~="w-full"])': {
marginBottom: `-${theme('spacing.16')}`,
},
rowGap: theme('spacing.16'),
paddingTop: theme('spacing.16'),
paddingBottom: theme('spacing.16'),
},
},
}) A few things to note:
In general, you're less likely to run into issues when you only ever have a single class for a utility or component to target. This is why I'm using nesting and making sure other classes use |
This should be fixed by #12113, and will be available in the next release. You can already try it by using the insiders build — may take 15–20m to become available:
|
Hey @thecrypticace. This is amazing. The bug is resolved and I learned. Thank you! |
What version of Tailwind CSS are you using?
v3.3.3
What build tool (or framework if it abstracts the build tool) are you using?
Vite v4.4.9
What version of Node.js are you using?
v20.7.0
What browser are you using?
Any
What operating system are you using?
macOS 14.0
Reproduction URL
https://play.tailwindcss.com/jZXL8Axggn
Describe your issue
What I have is this:
A Tailwind config file containing the following:
A class in my templates
[&>*]:after:w-full
The combination of this JS config and this class trips up something and results in compilation warings and the following CSS in my compiled file:
I noticed this because of the error
npm run build
produces:And I can even see in VS code with the TW extension the malformed CSS when I hover over this one class:
When I either:
'.outer-grid>*:last-child:is(.w-full)'
statement from the@media sceen(md)
query,the warning and malformed CSS is gone. Note that the
'.outer-grid>*:last-child:is(.w-full)'
statement not in a media query compiles without issues.A workaround is to use an attribute selector instead
[class~="w-full"]
. https://play.tailwindcss.com/i6OoVDdQbc?file=configThe text was updated successfully, but these errors were encountered: