[v4] [email protected] postcss broken production build space-{x,y}-*, divide-{x,y}-*

[pderiy]

What version of Tailwind CSS are you using?

• @tailwindcss/[email protected]
• [email protected]
• [email protected]
• [email protected]

What build tool (or framework if it abstracts the build tool) are you using?

• @angular-devkit/[email protected]

What version of Node.js are you using?

• [email protected]

What browser are you using?

• Google Chrome 132.0.6834.111 (Official Build) (arm64)

What operating system are you using?

• macOS

Reproduction URL

• https://github.com/pderiy/tw-broken-where-selector

Steps to reproduce:

• pull repo
• npm install
  ----
• npm run start (to run dev server)
• Check the page. It should have spacing between lines. So it looks good
  ----
• npm run build
• cd dist/angular/browser
• run http server (I'm using npm package "http-server")
• Check the page. It doesn't have spacing right now. The problem is described in next scrtion.

Describe your issue
Install fresh angular project and add tailwind to it. Try "serve". It works fine. But when u create production build it compiles with some wrong selectors. Generally I found broken selectors which are using :where in their query. It just reorders them.
Check next examples:

• tailwind@3 "ng build" css output [CORRECT]:

.space-y-6 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse))
}

• tailwind@4 "ng serve" output [CORRECT]:

  :where(.space-y-6 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
  }

• tailwind@4 "ng build" output [INCORRECT]:

  .space-y-6 :where(>:not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)))
  }

• space-y-6 is out outside of :where with tailwind@4 and angular production build

Testing selector without tailwind with angular

I tried to add code:

  :where(.space-y-6 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
  }

to style.css file and create production build. And it works fine. It just doesn't work when tailwind/postcss adds it

[AlejandroAltF4Dev]

same here!

[Owain94]

I'm almost certain this isn't an issue caused by Tailwind.
Somewhere in the angular build process there is a step that flattens the CSS to something incorrect it seems.

Can you try the following, this seemed to have fixed the issue on my projects.

To use tailwind v4 with the angular cli or nx you currently have to override the postcss rules by creating an .postcssrc.json file.

Can you change the content of that file to the following:

{
  "plugins": {
    "@tailwindcss/postcss": {
      "optimize": {
        "minify": true
      }
    }
  }
}

[AlejandroAltF4Dev]

@Owain94 yeap, that did the trick for me too! Thanks!

[Owain94]

I'm not sure why this works, I'm not too familiar with the angular build process.
But I think this causes the tailwind purge logic to run before the angular style optimization.

When disabling just the angular style optimizations and leaving all other optimizations turned on, the css output will NOT have the invalid CSS code. So it seems that the issue is caused by the css processor the angular cli is using.

[jits]

This is most likely due to vitejs/vite#18974, which is fixed and included in esbuild v0.25.0 which is a breaking change, and probably one that needs Angular to be updated to support first.

[fernandosuyama]

I'm almost certain this isn't an issue caused by Tailwind. Somewhere in the angular build process there is a step that flattens the CSS to something incorrect it seems.

Can you try the following, this seemed to have fixed the issue on my projects.

To use tailwind v4 with the angular cli or nx you currently have to override the postcss rules by creating an .postcssrc.json file.

Can you change the content of that file to the following:

{
"plugins": {
"@tailwindcss/postcss": {
"optimize": {
"minify": true
}
}
}
}

@Owain94 Thank you very much! The spaces in production mode were broken, but now Angular 19 + Tailwind v4.0 is working.