You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I'm using @screen md instead of @media screen(md) — they're functionally equivalent but the first one is a bit shorter.
I'm using [class~="w-full"] instead of .w-full so none of these utilities are generated when using w-full and instead only when outer-grid is used.
I'm treating the top-level component as a single class — not a selector.
I'm using CSS nesting
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 [class~="…"] syntax because otherwise Tailwind CSS will treat that as something to output when finding w-full, md:w-full, etc…
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:
![Screenshot_2023-09-28_at_17 09 03](https://private-user-images.githubusercontent.com/69107412/271332505-a8730642-f74d-43e7-8439-0c0903778464.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjAzMTYxNzQsIm5iZiI6MTcyMDMxNTg3NCwicGF0aCI6Ii82OTEwNzQxMi8yNzEzMzI1MDUtYTg3MzA2NDItZjc0ZC00M2U3LTg0MzktMGMwOTAzNzc4NDY0LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA3MDclMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNzA3VDAxMzExNFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTVjYmFmYzg1Njg4NjNkMDQ2MGQzYWI2YjA0MjJkNzJiOTZiM2NkZWVhNDJmNDhiYzY3YTRjNzUxNjUzMmZlZmQmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.O9VrpIPfV31Lhb1F1HwR1uTp2FhbWJTkl6g66T5o3S8)
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: