[v4] angular@19.1 postcss broken production build space-{x,y}-*, divide-{x,y}-*

[pderiy]

What version of Tailwind CSS are you using?

• @tailwindcss/postcss@4.0.2
• tailwindcss@4.0.2
• postcss@8.5.1
• angular@19.1.4

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

• @angular-devkit/build-angular@19.1.5

What version of Node.js are you using?

• Node.js@22.13.1

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.

[chz]

Temporarily fix:

install lightningcss (bun|pnpm|npm) im my case bun.

nuxt.config.ts:

  vite: {
    // ...
    build: {
      cssMinify: 'lightningcss',
    },
    // ...
  },

[frenzymind]

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

If I use this solution, this breaks my dark selector. I toggle dark them manually by tailwindcss docs: Toggling dark mode manually

In my case I use this in style.scss file: @custom-variant dark (&:where(.app-dark, .app-dark * ));

And for example with this html I always have dark background, because of class specificity. So, custom-variant become broken.

<div class="bg-white dark:bg-black">
      <!-- ... -->
</div>

[pderiy]

Just upgraded nx and angular. It works fine with latest versions:

• nx@20.5.0
• angular@19.2.1
• tailwind@4.0.12

Closing the issue as it looks like fixed.