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

[micobarac]

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.

tailwind.css

@import "tailwindcss";

styles.css

@import "./tailwind.css";

application.css

@reference "../tailwind.css";

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

The error:

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)

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.

Versions:

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

[ajitzero]

Seems like an issue with angular/compiler package. Can you please cross-post this issue?

[micobarac]

https://github.com/angular/angular/issues/60294

[rozsazoltan]

After a quick search, it turns out that this bug was recently reported to Angular. It was just fixed a few hours ago, and you'll likely get the fix in the next Angular release:

• angular/angular-cli issue #29789 - 2025-03-10 (reported issue what mentioned in here) <<< related
• angular/angular-cli PR #29792 - 2025-03-10 (fix issue)
• angular/angular-cli PR #29795 - 2025-03-10 (fix issue)

Currently latest Angular release: v19.2.1 - 2025-03-05 (5 days ago)

The issue is likely to be resolved starting from version v19.2.2. So, to properly use TailwindCSS v4, you will need at least version v19.2.2.

• Source: TailwindCSS v4 with Angular 19 - Changes in CSS Not Reflecting Without Restarting ng serve

Update

Fixed from v19.2.2. Use latest version.

[rozsazoltan]

angular/angular-cli#29789

[micobarac]

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

[rozsazoltan]

Someone reported that it still crashes with more complex examples. By the way, I assume this is more of an Angular issue rather than a TailwindCSS one; I'm not sure how isolated these cases are.

• Angular 19 cannot automatically recover using @apply with Tailwind CSS 4 angular/angular-cli#29789 (comment)

(Oh, I see it's you. Never mind. It's fine if the two topics are connected.)

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