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 do 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.