Latest tailwindcss/postcss incompatible with latest angular 20

[zachwinneacoin]

Extremely inconsistent builds when using latest of both - even with brand new projects
angular: ^20.3.0
tailwindcss/postcss: ^4.1.16

i downgraded to 4.1.13 and seems to be working fine. with latest ng

[sq-ashkan]

Hey @zachwinneacoin — I hit the same issue with @tailwindcss/postcss v4.1.14+ and Angular. Here's what's going on and how to fix it properly.

The root cause

The inconsistent builds are caused by a race condition in the PostCSS plugin's file watching and caching. Starting from @tailwindcss/postcss v4.1.14, there were changes to how the plugin handles incremental builds and dependency tracking. Angular's build system (via the @angular-devkit/build-angular Webpack/esbuild pipeline) processes CSS files in parallel, and the newer Tailwind PostCSS plugin doesn't always play nicely with Angular's build orchestration.

Specifically, the issue is that Angular 20's esbuild-based builder processes stylesheets concurrently, and the Tailwind PostCSS plugin's internal module graph can get into an inconsistent state when multiple CSS files are being processed at the same time.

Immediate fix: pin the version

You already found this — pinning to 4.1.13 works:

{
  "devDependencies": {
    "@tailwindcss/postcss": "4.1.13"
  }
}

Make sure to use an exact version (no ^ prefix) so npm/yarn doesn't auto-upgrade:

npm install @tailwindcss/postcss@4.1.13 --save-exact

Alternative fix: use the Tailwind CLI instead of PostCSS

If you want to use the latest Tailwind version without the PostCSS compatibility issue, you can switch to the Tailwind CLI approach. In your angular.json, add a custom build step:

{
  "architect": {
    "build": {
      "options": {
        "assets": [
          // ...
        ],
        "styles": ["src/styles.css"]
      }
    }
  }
}

And run Tailwind separately:

npx @tailwindcss/cli -i ./src/styles.css -o ./src/styles.generated.css --watch

This avoids the PostCSS integration entirely and sidesteps the race condition.

Alternative fix: use the Vite builder

If you're on Angular 20, you likely have access to the newer Vite-based builder (@angular/build). The Vite builder handles PostCSS differently and may not have this issue:

{
  "architect": {
    "build": {
      "builder": "@angular/build:application",
      "options": {
        // ...
      }
    }
  }
}

Status of the bug

This seems related to #16084 and similar reports about inconsistent builds in non-Vite/non-Next.js environments. The Tailwind team has been primarily testing against Vite and Next.js, so Angular-specific edge cases can slip through.

If pinning to 4.1.13 is working for you, I'd stick with that until a confirmed fix lands. You might also want to open a proper bug report with a minimal Angular 20 reproduction repo — that would help the Tailwind team debug and fix the specific race condition.

Hope this helps!