← ClaudeAtlas

06-handle-nextjs-and-tailwind-compilation-issues-on-windowslisted

Trigger when running Next.js dev/build scripts, configuring PostCSS or Tailwind CSS, or hitting local web-app compilation errors — file-watcher loops, endless recompiles, 'module not found' on a config path, Tailwind styles not applying, or a dev server that rebuilds forever. Applies on macOS and Linux too; the watcher-loop item is the one Windows-specific gotcha. Use this even if the user just says 'the dev server is acting weird' or 'styles aren't loading'; covers the watcher-loop and config-path gotchas.
markkennethbadilla/public-agent-provisioning · ★ 0 · Web & Frontend · score 72
Install: claude install-skill markkennethbadilla/public-agent-provisioning
# Next.js + Tailwind Compilation Gotchas (Windows watcher issue + cross-platform basics) ## 1. Turbopack watcher loops on Windows → fall back to Webpack Turbopack's file-watcher has historically caused infinite rebuild loops and freezes on **Windows** specifically (rooted in Windows' file-change-notification API). macOS and Linux use a different watcher path and rarely hit this. The fix, when you do see it, is `--webpack`: ``` rtk bun run dev -- --webpack rtk bunx next dev --webpack ``` **Version-bound warning — verify before relying on this workaround.** Turbopack matures fast; the loop behavior was confirmed on Next.js <=15/Win10. Before assuming `--webpack` is needed on a new project, run the dev server once without it and watch for the loop (sustained CPU + repeated "compiling..." lines with no stabilisation). If Turbopack is stable, prefer it (faster HMR). Only reach for `--webpack` when you observe the loop or a freeze — and on macOS/Linux you likely never will. ## 2. Always run from the child project root (all platforms) Run every `next dev` / `next build` command from inside the project's own directory, not a monorepo parent. Next.js walks parent directories to find `next.config.*`; from a parent it may pick up the wrong (or no) config and silently break. This applies identically on macOS, Linux, and Windows. ``` cd apps/web # or wherever next.config.ts lives rtk bun run dev -- --webpack ``` ## 3. Tailwind v4: declare explicit `@sourc