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

[micobarac]

#17295

This hasn't been fixed. Angular 21.0.8 and Tailwind CSS 4.1.18.

Try setting invalid class value inside css file using @apply inset-shadow-md;:

Error: Cannot apply unknown utility class `inset-shadow-md`
    at onInvalidCandidate (/Users/milan/Sites/tailwind-shader/node_modules/tailwindcss/dist/lib.js:21:1511)
    at Te (/Users/milan/Sites/tailwind-shader/node_modules/tailwindcss/dist/lib.js:16:36652)
    at /Users/milan/Sites/tailwind-shader/node_modules/tailwindcss/dist/lib.js:21:355
    at Rr (/Users/milan/Sites/tailwind-shader/node_modules/tailwindcss/dist/lib.js:3:1718)
    at _ (/Users/milan/Sites/tailwind-shader/node_modules/tailwindcss/dist/lib.js:3:1377)
    at $e (/Users/milan/Sites/tailwind-shader/node_modules/tailwindcss/dist/lib.js:21:172)
    at un (/Users/milan/Sites/tailwind-shader/node_modules/tailwindcss/dist/lib.js:38:294)
    at async cn (/Users/milan/Sites/tailwind-shader/node_modules/tailwindcss/dist/lib.js:38:631)
    at async Xr (/Users/milan/Sites/tailwind-shader/node_modules/@tailwindcss/node/dist/index.js:10:3417)
    at async I (/Users/milan/Sites/tailwind-shader/node_modules/@tailwindcss/postcss/dist/index.js:10:3977)
Application bundle generation failed. [0.046 seconds] - 2026-01-16T08:56:24.924Z

✘ [ERROR] Cannot apply unknown utility class `inset-shadow-md` [plugin angular-css]

Correcting error and setting class to a valid value, like @apply inset-shadow-sm;, application cannot recover until restart.

[beanscg]

Bean Labs took a public-source pass on this issue.

The narrowest useful next step looks like: identify compiler recovery boundary

Public evidence checked:

• tailwindcss/dist/lib.js

A good acceptance check would be a narrow public change that directly exercises the issue's reported boundary.

No PR opened from this pass.

[RobinMalfait]

Hey! I'm pretty sure this is an Angular (CLI) bug and not a Tailwind CSS bug. While it's true that we did throw a normal error before, since Tailwind CSS v4.1.14 we don't throw normal errors anymore, but instead we use the recommended way by throwing a PostCSS error: #18373

try {
  …
} catch (err) {
  throw root.error(err.message)
}

And before we do that, we do make sure that we declare what files to watch such that we can recover. The linked PR did fix issues for other PostCSS projects, which is why I believe it's an Angular bug because 1) we use the recommended PostCSS error, and 2) we communicate what files to watch for.

tailwindcss/packages/@tailwindcss-postcss/src/index.ts

Lines 338 to 347 in b53fa09

	// Ensure all dependencies we have collected thus far are included so that the rebuild
	// is correctly triggered
	for (let file of context.fullRebuildPaths) {
	result.messages.push({
	type: 'dependency',
	plugin: '@tailwindcss/postcss',
	file: path.resolve(file),
	parent: result.opts.from,
	})
	}

tailwindcss/packages/@tailwindcss-postcss/src/index.ts

Lines 353 to 357 in b53fa09

	if (error && typeof error === 'object' && 'message' in error) {
	throw root.error(`${error.message}`)
	}
	throw root.error(`${error}`)

So this comment was true, but is not true anymore since version 4.1.14 which was released in October of 2025

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

[sanketlakhera]

@micobarac I just tested on Angular 22.1.0, dev server automatically recovers after following your given steps.
Node Version: 24.15.0
Angular version: 22.1.0
TailwindCss: 4.1.12