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

[micobarac]

Which @angular/* package(s) are the source of the bug?

compiler

Is this a regression?

No

Description

Angular 19 cannot recover when mistyping class name using @apply with Tailwind CSS 4.

When I accidentally mistyped class name inside @apply, then fixed it, Angular couldn't have automatically recovered.

Please provide a link to a minimal reproduction of the bug

tailwind.css

@import "tailwindcss";

styles.css

@import "./tailwind.css";

application.css

@reference "../tailwind.css";

h1 {
  @apply text-3xl font-boldd underline text-sky-500;
}

After fixing an error inside...

application.css

@reference "../tailwind.css";

h1 {
  @apply text-3xl font-bold underline text-sky-500;
}

Angular doesn't recover and the error remains. I need to restart the app.

Please provide the exception or error you saw

Application bundle generation failed. [0.130 seconds]

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

    node_modules/tailwindcss/dist/lib.js:17:346:
      17 │ ...r,{onInvalidCandidate:V=>{throw new Error(`Cannot apply unknown...
         ╵                                    ^

    at onInvalidCandidate (/Users/milan/Sites/angular19/node_modules/tailwindcss/dist/lib.js:17:347)
    at ne (/Users/milan/Sites/angular19/node_modules/tailwindcss/dist/lib.js:12:115998)
    at $e (/Users/milan/Sites/angular19/node_modules/tailwindcss/dist/lib.js:17:310)
    at Lr (/Users/milan/Sites/angular19/node_modules/tailwindcss/dist/lib.js:33:724)
    at async Mr (/Users/milan/Sites/angular19/node_modules/tailwindcss/dist/lib.js:33:977)
    at async ot (/Users/milan/Sites/angular19/node_modules/@tailwindcss/node/dist/index.js:10:3272)
    at async p (/Users/milan/Sites/angular19/node_modules/@tailwindcss/postcss/dist/index.js:8:3242)
    at async Object.Once (/Users/milan/Sites/angular19/node_modules/@tailwindcss/postcss/dist/index.js:8:4017)
    at async LazyResult.runAsync (/Users/milan/Sites/angular19/node_modules/@angular-devkit/build-angular/node_modules/postcss/lib/lazy-result.js:261:11)
    at async compileString (/Users/milan/Sites/angular19/node_modules/@angular-devkit/build-angular/node_modules/@angular/build/src/tools/esbuild/stylesheets/stylesheet-plugin-factory.js:244:31)

  This error came from the "onLoad" callback registered here:

    node_modules/@angular-devkit/build-angular/node_modules/@angular/build/src/tools/esbuild/stylesheets/stylesheet-plugin-factory.js:125:22:
      125 │                 build.onLoad({ filter: language.fileFilter, names...
          ╵                       ~~~~~~

    at setup (/Users/milan/Sites/angular19/node_modules/@angular-devkit/build-angular/node_modules/@angular/build/src/tools/esbuild/stylesheets/stylesheet-plugin-factory.js:125:23)
    at handlePlugins (/Users/milan/Sites/angular19/node_modules/esbuild/lib/main.js:1151:21)

Please provide the environment you discovered this bug in (run ng version)

Angular: 19.2.1
Tailwind: 4.0.12
Node: 20.18.1
OS: macOS Sequoia 15.3.1 (24D70)

Anything else?

tailwindlabs/tailwindcss#17077

[micobarac]

It still doesn't work properly in a more complex real life Angular application with nested (mutually imported) CSS files.

[micobarac]

Sadly, Angular still exhibits the same issue inside imported child CSS modules.

styles.css -> @import './child.css'

Playing with valid / invalid Tailwind CSS styles inside @apply works only in parent styles.css. Only then, Angular is able to recover, thanks to latest fix. But, inside child.css, Angular still gets stuck on error. Adding @reference 'tailwindcss' to the child.css doesn't help.

[alan-agius4]

Can you setup a minimal repro please?

You can read here why this is needed. A good way to make a minimal repro is to create a new app via ng new repro-app and adding the minimum possible code to show the problem. Then you can push this repository to github and link it here.

This might be related to your directory structure so its really important to get an accurate repro to diagnose this.

[micobarac]

I tried creating a project on StackBlitz, but it looks like Tailwind CSS 4 internal PostCSS mechanism collides with StackBlitz system, and cannot be run there.

Here is a Github repository with a minimal Angular 19 project instead:

https://github.com/micobarac/angular19

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 discussion here, too:

tailwindlabs/tailwindcss#17077

[alan-agius4]

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.

// cc @clydin

[alan-agius4]

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.