I'm working on an Angular 19 project with Tailwind CSS 4. When I make a typo in a class inside my styles.css, Angular throws an error in the console, which is expected. However, even after fixing the typo, the error persists unless I stop and restart ng serve.

Project Structure:

\---src
    |   index.html
    |   main.ts
    |   styles.css
    |
    +---app
    |   |   appponent.css
    |   |   appponent.html
    |   |   appponent.spec.ts
    |   |   appponent.ts
    |   |   app.config.ts
    |   |   app.routes.ts
    |   |
    |   +---landing
    |   \---shared
    \---environments
            environments.ts

Initial appponent.css that caused the issue:

@import "tailwindcss";

#title {
  @apply bg-[url("/backgrounds/bg2.png")] bg-contain bg-center border-spacing-y-8  sm:bg-contain bg-no-repeat sm:h-screen h-96 bborder-2;
}

* {
  @apply p-0 m-0;
}

I mistakenly wrote bborder-2 instead of border-2. This caused the following error:

[ERROR] Cannot apply unknown utility class: bborder-2 [plugin angular-css]

After fixing the typo (bborder-2 → border-2), the error persists:

@import "tailwindcss";

#title {
  @apply bg-[url("/backgrounds/bg2.png")] bg-contain bg-center border-spacing-y-8  sm:bg-contain bg-no-repeat sm:h-screen h-96 border-2;
}

* {
  @apply p-0 m-0;
}

Console:

X [ERROR] Cannot apply unknown utility class: bborder-2 [plugin angular-css]

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

    at onInvalidCandidate (E:\Angular\mi-portafolioV2\node_modules\tailwindcss\dist\lib.js:17:347)
    at ne (E:\Angular\mi-portafolioV2\node_modules\tailwindcss\dist\lib.js:12:115698)
    at $e (E:\Angular\mi-portafolioV2\node_modules\tailwindcss\dist\lib.js:17:310)
    at Lr (E:\Angular\mi-portafolioV2\node_modules\tailwindcss\dist\lib.js:33:724)
    at async Mr (E:\Angular\mi-portafolioV2\node_modules\tailwindcss\dist\lib.js:33:977)
    at async ot (E:\Angular\mi-portafolioV2\node_modules\@tailwindcss\node\dist\index.js:10:3272)
    at async p (E:\Angular\mi-portafolioV2\node_modules\@tailwindcss\postcss\dist\index.js:8:3242)
    at async Object.Once (E:\Angular\mi-portafolioV2\node_modules\@tailwindcss\postcss\dist\index.js:8:3443)
    at async LazyResult.runAsync (E:\Angular\mi-portafolioV2\node_modules\postcss\lib\lazy-result.js:293:11)
    at async compileString (E:\Angular\mi-portafolioV2\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/build/src/tools/esbuild/stylesheets/stylesheet-plugin-factory.js:125:22:
      125 │                 build.onLoad({ filter: language.fileFilter, names...
          ╵                       ~~~~~~

    at setup (E:\Angular\mi-portafolioV2\node_modules\@angular\build\src\tools\esbuild\stylesheets\stylesheet-plugin-factory.js:125:23)    
    at handlePlugins (E:\Angular\mi-portafolioV2\node_modules\esbuild\lib\main.js:1151:21)


Watch mode enabled. Watching for file changes...
Application bundle generation failed. [0.109 seconds]

X [ERROR] Cannot apply unknown utility class: bborder-2 [plugin angular-css]

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

    at onInvalidCandidate (E:\Angular\mi-portafolioV2\node_modules\tailwindcss\dist\lib.js:17:347)
    at ne (E:\Angular\mi-portafolioV2\node_modules\tailwindcss\dist\lib.js:12:115698)
    at $e (E:\Angular\mi-portafolioV2\node_modules\tailwindcss\dist\lib.js:17:310)
    at Lr (E:\Angular\mi-portafolioV2\node_modules\tailwindcss\dist\lib.js:33:724)
    at async Mr (E:\Angular\mi-portafolioV2\node_modules\tailwindcss\dist\lib.js:33:977)
    at async ot (E:\Angular\mi-portafolioV2\node_modules\@tailwindcss\node\dist\index.js:10:3272)
    at async p (E:\Angular\mi-portafolioV2\node_modules\@tailwindcss\postcss\dist\index.js:8:3242)
    at async Object.Once (E:\Angular\mi-portafolioV2\node_modules\@tailwindcss\postcss\dist\index.js:8:3443)
    at async LazyResult.runAsync (E:\Angular\mi-portafolioV2\node_modules\postcss\lib\lazy-result.js:293:11)
    at async compileString (E:\Angular\mi-portafolioV2\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/build/src/tools/esbuild/stylesheets/stylesheet-plugin-factory.js:125:22:
      125 │                 build.onLoad({ filter: language.fileFilter, names...
          ╵                       ~~~~~~

    at setup (E:\Angular\mi-portafolioV2\node_modules\@angular\build\src\tools\esbuild\stylesheets\stylesheet-plugin-factory.js:125:23)    
    at handlePlugins (E:\Angular\mi-portafolioV2\node_modules\esbuild\lib\main.js:1151:21)

Even though the class is now correct, Tailwind does not seem to recognize the fix unless I restart my Angular server (npm run start).

Package Versions (package.json)

"dependencies": {
  "@angular/common": "^20.0.0-next.1",
  "@angular/core": "^20.0.0-next.1",
  "tailwindcss": "^4.0.12",
  "@tailwindcss/postcss": "^4.0.12",
  "postcss": "^8.5.3"
}

• Is there a way to make Tailwind recognize CSS changes in Angular 20 without having to restart the server?
• Could this be related to Tailwind’s JIT engine or Angular's file watching behavior?
• Any workaround to force Tailwind to recompile without restarting ng serve?

I'm working on an Angular 19 project with Tailwind CSS 4. When I make a typo in a class inside my styles.css, Angular throws an error in the console, which is expected. However, even after fixing the typo, the error persists unless I stop and restart ng serve.

Project Structure:

\---src
    |   index.html
    |   main.ts
    |   styles.css
    |
    +---app
    |   |   appponent.css
    |   |   appponent.html
    |   |   appponent.spec.ts
    |   |   appponent.ts
    |   |   app.config.ts
    |   |   app.routes.ts
    |   |
    |   +---landing
    |   \---shared
    \---environments
            environments.ts

Initial appponent.css that caused the issue:

@import "tailwindcss";

#title {
  @apply bg-[url("/backgrounds/bg2.png")] bg-contain bg-center border-spacing-y-8  sm:bg-contain bg-no-repeat sm:h-screen h-96 bborder-2;
}

* {
  @apply p-0 m-0;
}

I mistakenly wrote bborder-2 instead of border-2. This caused the following error:

[ERROR] Cannot apply unknown utility class: bborder-2 [plugin angular-css]

After fixing the typo (bborder-2 → border-2), the error persists:

@import "tailwindcss";

#title {
  @apply bg-[url("/backgrounds/bg2.png")] bg-contain bg-center border-spacing-y-8  sm:bg-contain bg-no-repeat sm:h-screen h-96 border-2;
}

* {
  @apply p-0 m-0;
}

Console:

X [ERROR] Cannot apply unknown utility class: bborder-2 [plugin angular-css]

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

    at onInvalidCandidate (E:\Angular\mi-portafolioV2\node_modules\tailwindcss\dist\lib.js:17:347)
    at ne (E:\Angular\mi-portafolioV2\node_modules\tailwindcss\dist\lib.js:12:115698)
    at $e (E:\Angular\mi-portafolioV2\node_modules\tailwindcss\dist\lib.js:17:310)
    at Lr (E:\Angular\mi-portafolioV2\node_modules\tailwindcss\dist\lib.js:33:724)
    at async Mr (E:\Angular\mi-portafolioV2\node_modules\tailwindcss\dist\lib.js:33:977)
    at async ot (E:\Angular\mi-portafolioV2\node_modules\@tailwindcss\node\dist\index.js:10:3272)
    at async p (E:\Angular\mi-portafolioV2\node_modules\@tailwindcss\postcss\dist\index.js:8:3242)
    at async Object.Once (E:\Angular\mi-portafolioV2\node_modules\@tailwindcss\postcss\dist\index.js:8:3443)
    at async LazyResult.runAsync (E:\Angular\mi-portafolioV2\node_modules\postcss\lib\lazy-result.js:293:11)
    at async compileString (E:\Angular\mi-portafolioV2\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/build/src/tools/esbuild/stylesheets/stylesheet-plugin-factory.js:125:22:
      125 │                 build.onLoad({ filter: language.fileFilter, names...
          ╵                       ~~~~~~

    at setup (E:\Angular\mi-portafolioV2\node_modules\@angular\build\src\tools\esbuild\stylesheets\stylesheet-plugin-factory.js:125:23)    
    at handlePlugins (E:\Angular\mi-portafolioV2\node_modules\esbuild\lib\main.js:1151:21)


Watch mode enabled. Watching for file changes...
Application bundle generation failed. [0.109 seconds]

X [ERROR] Cannot apply unknown utility class: bborder-2 [plugin angular-css]

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

    at onInvalidCandidate (E:\Angular\mi-portafolioV2\node_modules\tailwindcss\dist\lib.js:17:347)
    at ne (E:\Angular\mi-portafolioV2\node_modules\tailwindcss\dist\lib.js:12:115698)
    at $e (E:\Angular\mi-portafolioV2\node_modules\tailwindcss\dist\lib.js:17:310)
    at Lr (E:\Angular\mi-portafolioV2\node_modules\tailwindcss\dist\lib.js:33:724)
    at async Mr (E:\Angular\mi-portafolioV2\node_modules\tailwindcss\dist\lib.js:33:977)
    at async ot (E:\Angular\mi-portafolioV2\node_modules\@tailwindcss\node\dist\index.js:10:3272)
    at async p (E:\Angular\mi-portafolioV2\node_modules\@tailwindcss\postcss\dist\index.js:8:3242)
    at async Object.Once (E:\Angular\mi-portafolioV2\node_modules\@tailwindcss\postcss\dist\index.js:8:3443)
    at async LazyResult.runAsync (E:\Angular\mi-portafolioV2\node_modules\postcss\lib\lazy-result.js:293:11)
    at async compileString (E:\Angular\mi-portafolioV2\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/build/src/tools/esbuild/stylesheets/stylesheet-plugin-factory.js:125:22:
      125 │                 build.onLoad({ filter: language.fileFilter, names...
          ╵                       ~~~~~~

    at setup (E:\Angular\mi-portafolioV2\node_modules\@angular\build\src\tools\esbuild\stylesheets\stylesheet-plugin-factory.js:125:23)    
    at handlePlugins (E:\Angular\mi-portafolioV2\node_modules\esbuild\lib\main.js:1151:21)

Even though the class is now correct, Tailwind does not seem to recognize the fix unless I restart my Angular server (npm run start).

Package Versions (package.json)

"dependencies": {
  "@angular/common": "^20.0.0-next.1",
  "@angular/core": "^20.0.0-next.1",
  "tailwindcss": "^4.0.12",
  "@tailwindcss/postcss": "^4.0.12",
  "postcss": "^8.5.3"
}

• Is there a way to make Tailwind recognize CSS changes in Angular 20 without having to restart the server?
• Could this be related to Tailwind’s JIT engine or Angular's file watching behavior?
• Any workaround to force Tailwind to recompile without restarting ng serve?

• angular
• tailwind-css
• tailwind-css-4

Share Improve this question Follow asked Mar 10 at 16:53 Anderson RuedaAnderson Rueda 2311 silver badge33 bronze badges 4

• Here's an example of the problem youtu.be/o0Z-iU-Q4jU – Anderson Rueda Commented Mar 10 at 16:56
• Off: You don’t need @source "/". TailwindCSS v4 comes with automatic source detection: * Automatic Source Detection from TailwindCSS v4 - StackOverflow – rozsazoltan Commented Mar 10 at 16:58
• Off: You can remove VSCode warnings by using the official TailwindCSS Intellisense VSCode extension: marketplace.visualstudio/… – rozsazoltan Commented Mar 10 at 16:59
• Related for your problem: tailwindlabs/tailwindcss - discussion #17077 – rozsazoltan Commented Mar 10 at 17:01

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 2

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)
• 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.

Update

Issue closed as not planned in Angular.

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

• Source: angular/angular-cli#29789

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.

• Source: angular/angular-cli#29789