Description
What version of Tailwind CSS are you using?
For example: v4.1.7
What build tool (or framework if it abstracts the build tool) are you using?
@tailwindcss/cli@4.1.7
What version of Node.js are you using?
v22.11.0
What browser are you using?
Chrome
What operating system are you using?
macOS
Reproduction
I can't reproduce it on Play Tailwind since it does not minify. Below are the steps to reproduce:
Create a test.css with the following content:
@import "tailwindcss";
@custom-variant @scroll-snapped-x {
@container scroll-state(snapped: x) { @slot; }
@supports (container-type: scroll-state) {
.\@scroll-snapped-x > & { @slot }
}
}
And "index.html":
<section class="@container">
<div class="@scroll-snapped-x:h-auto"></div>
</section>
Run Tailwind CLI on that "test.css" file:
$ npx tailwindcss --input test.css
Inspects the output to see that it contains the following snippet:
.\@scroll-snapped-x\:h-auto {
@container scroll-state(snapped: x) {
height: auto;
}
@supports (container-type: scroll-state) {
.\@scroll-snapped-x > & {
height: auto;
}
}
}
Now run Tailwind CLI with --minify
flag:
$ npx tailwindcss --input test.css --minify
Inspects the output and see that only the following snippet is generated (whitespaces and newlines are added for readability):
@supports (container-type:scroll-state) {
.\@scroll-snapped-x>.\@scroll-snapped-x\:h-auto {
height:auto
}
}
Similarly, when run with --minify
flag, the output only contains the following snippet:
@supports (container-type: scroll-state) {
.\@scroll-snapped-x > .\@scroll-snapped-x\:h-auto {
height: auto;
}
}