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