[v4][cli] The `--minify` and `--optimize` flags remove CSS from output

[sntran]

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/[email protected]

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;
  }
}

[sntran]

This seems to be an issue in LightingCSS.

[caseyohara]

I'm seeing the exact same problem using tailwindcss-rails (v4.2.3) via tailwindcss-ruby (v4.1.10).

The output contains the expected custom variant when minification is turned off, but the output does not contain it when minification is turned on.

[sharf666]

I am noticing that prose prose-lg looks different in minified compared to normal, as this rule is gone in minified:

@layer utilities {
  .prose-lg {
    font-size: 1.125rem;
    line-height: 1.7777778;
  }
}

I am only noticing this now because up until now font-size was somehow still okay (though now it's 1rem which is immediately noticeable), but checking back till 4.1.3 this was still a problem and made visible difference due to line-height discrepancy.

[asipple1]

I'm seeing the same issue. It seems to strip most of my @theme variables when using --minify

[wongjn]

@asipple1 you might be encountering something slightly different. Tailwind does not output all @theme variables, only ones Tailwind sees are being used. Otherwise, if it is stripping some variables that you feel are used and should exist, consider providing a git repo and we can take a look.