Tailwind CSS not working in production

Tailwind's JIT compiler walks every file in the content array, extracts class names it recognizes, and emits exactly that set into the final CSS bundle. In dev mode the compiler generates utilities on demand as you type, so every class works whether the array is correct or not. The first time you hit next build or any real production build, Tailwind enforces the list. Classes in files outside the list get purged. Your page ships without the styles that worked five minutes ago on localhost.

AI builders like Lovable, Bolt, and v0 scaffold a content array with ./src/**/* and stop. Later you add an app/ directory or pull components from an @myorg/ui package inside node_modules. Neither is covered. Every class inside those files disappears on build. The error does not surface in dev because JIT papers over it.

The second common source is dynamic class names. A component writes className={`bg-${color}-500`}` where color is a variable. The scanner reads the literal string in the source file, sees no complete class, emits nothing. In dev it works because JIT picks up bg-red-500 the moment it renders. In prod the bundle never contains it. Fix by mapping the variable to a literal lookup table or by safelisting the pattern in the config.

The third source is Tailwind v4 migrations. v4 dropped tailwind.config.js and uses @source directives inside your main CSS. If you installed v4 but left the v3 config in place, Tailwind falls back to defaults, ignores your paths, and produces a tiny bundle. The symptom looks identical to a misconfigured content array.