Tailwind v4 persistent cache stuck on CSS syntax errors in Next.js (Turbopack & Monorepo)

Link to the code that reproduces this issue

https://github.com/NapsterDinh/reproduce-turbopack-issue

To Reproduce

Case 1: Standard Root Structure (with Turbopack)
Reproduce: https://codesandbox.io/p/live/222f9507-4106-469c-8172-d5b12d51b379

1. Use Next.js 15 with Tailwind v4 and enable Turbopack (next dev --turbo).
2. In a CSS Module (e.g., Button.module.css), use @reference "../../app/globals.css";.
3. Introduce a syntax error in globals.css (e.g., remove a closing brace }).
4. Next.js shows the compilation error.
5. Fix the error in globals.css.
6. Result: The error overlay stays in the browser. Refreshing or restarting the server does not help.
7. This error is only disappear when i clear my .next folder or switch to run dev with --webpack flag

Case 2: Monorepo Structure (Turbopack & Webpack) - [More Severe]
Reproduct: https://github.com/NapsterDinh/reproduce-turbopack-issue

1. Setup a Monorepo where apps/web imports a CSS file from packages/ui/globals.css.
2. In apps/web/app/globals.css, use @import "@repo/ui/globals.css";.
3. Introduce a syntax error in the source file: packages/ui/globals.css.
4. Result: The app crashes with a syntax error.
5. Fix the error in packages/ui/globals.css.
6. Observation: Even after restarting the dev server with either --turbo or --webpack, the error persists. The build process seems to be serving a cached version of the broken CSS file indefinitely.

Current vs. Expected behavior

Expected behavior
Next.js and the Tailwind v4 engine should invalidate the cache and re-parse the CSS files as soon as the file watcher detects a fix, clearing the error overlay without requiring a manual .next deletion.

Actual behavior
The error state is cached persistently. It appears the dependency graph (especially when involving @reference or cross-package imports) fails to trigger a clean rebuild after a hard syntax error occurs.

Provide environment information

Next.js Version: 16.1.5
Tailwind CSS Version: 4.2.1
Node.js Version: 24.10.0
Package Manager: pnpm
Operating System: macOS / Windows

Which area(s) are affected? (Select all that apply)

Turbopack, Webpack

Which stage(s) are affected? (Select all that apply)

next dev (local)

Additional context

The issue is significantly worse in Monorepos because the file is outside the app's root, potentially confusing the invalidation logic.

This bug completely breaks the development workflow, as any typo requires a full rm -rf .next and a cold start, which is time-consuming in large projects.

Temporary workaround: rm -rf .next && next dev.

Supplement: Comparison with Vite (HMR behavior)
I suspect this is a cache invalidation failure within Next.js's build engine. Vite demonstrates that the Tailwind v4 compiler can recover from these errors seamlessly. However, Next.js appears to fail in re-scanning or re-linking the @reference dependency once a hard syntax error has been cached, suggesting that the link between the CSS Module and the referenced file is being lost or stuck in an error state in the .next directory.

Start with the linked reproducer and the CSS entry points named in the report: apps/web/app/globals.css, packages/ui/globals.css, and Button.module.css. Compare --turbo and --webpack after fixing the syntax error, then verify that the error overlay clears without deleting .next or restarting from a cold cache.