Skip to content

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

Open
@sntran

Description

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions