Angular 19 cannot automatically recover using @apply with Tailwind CSS 4

[micobarac]

Tailwind CSS: 4.0.14
Angular: 19.2.4
Node: 23.6.0
Chrome: 134.0.6998.89 (Official Build) (arm64)
MacOS: Sequoia 15.3.2 (24D81)

Reproduction URL

https://github.com/micobarac/angular19

Describe your issue

Reproducing the issue:

• run yarn install && yarn start
• open src/tailwind.css
• change bg-white class within @apply directive to bg-unknown at line 4
• observe the error:

✘ [ERROR] Cannot apply unknown utility class: bg-unknown [plugin angular-css]

    angular:styles/global:styles:1:8:
      1 │ @import 'src/styles.css';

• change bg-unknown class within @apply directive back to bg-white at line 4
• observe the error (Angular should have recovered by now):

✘ [ERROR] Cannot apply unknown utility class: bg-unknown [plugin angular-css]

    angular:styles/global:styles:1:8:
      1 │ @import 'src/styles.css';

I can't tell if this problem resides inside Angular 19 or Tailwind CSS 4.

I opened issue here:

angular/angular-cli#29789

angular/angular-cli#29789 (comment)

In Tailwind CSS version 4, syntax errors trigger an exception instead of a PostCSS error. This causes PostCSS to crash, preventing it from tracking the files Tailwind processes. As a result, these files aren't added to the file watcher / dependency tree, leading to issues where cached compilation results aren't invalidated when a file changes, since it isn't recognized as a transitive dependency.

I opened discussion here, too:

#17077

[Shuriken933]

Same problem with Nuxt (vue js)

[micobarac]

What's worse, Angular team does not plan to fix this, stating:

Closing as there isn’t much we can do here.
Tailwind is throwing an exception that causes the underlying PostCSS instance to crash and not return which files to watch.

[Celtian]

I am guessing it is crashing here ... https://github.com/tailwindlabs/tailwindcss/blob/main/packages/tailwindcss/src/apply.ts#L166

I am guessing If some tests will be added, problem will be fixed soon ...

[Figments]

having this issue as well; it's inconsistent—the error always pops up on initial build, but if new builds are generated during ng serve, it will work just fine

[Gharib84]

I am experiencing the same issue with the latest version of Angular. CSS changes are not reflecting without restarting ng serve when using Tailwind CSS V4. Here is my Angular CLI version
Angular CLI: 19.2.8
Node: 22.14.0
Package Manager: npm 11.1.0
Angular: 19.2.7

Application bundle generation failed. [0.479 seconds]

✘ [ERROR] Cannot apply unknown utility class: md:w-auto [plugin angular-css]

[matmeylan]

Experiencing this problem a well. We have a lot of @apply statements in a big project, and it would require a lot of refactoring to change this. Any known workaround ?

[medvidekPanda]

Same problem, so I switched back to TW 3.x.

[philipp-spiess]

Hey all! We just released a new patch release that should fix this. Let me know if you run into any issues with this!