How to Fix Tailwind CSS Classes Not Applying After Production Build

Tailwind classes that render correctly in local development but silently disappear in a production build point almost exclusively at one cause: Tailwind's JIT compiler only includes CSS for classes it can actually find, as complete literal strings, in the files it's configured to scan. If a class name isn't detectable that way, it doesn't make it into the production CSS bundle, even though the same class might have appeared to work in development under different conditions.

The most common specific version of this is dynamically constructed class names — building a class string at runtime through concatenation or template literals, like `` `text-${color}-500` `` where color is a variable. Tailwind's scanner looks for complete class names as literal text in your source files; it can't execute your JavaScript to figure out what `` `text-${color}-500` `` might evaluate to at runtime, so it never generates CSS for whatever the eventual class name turns out to be, regardless of how obviously correct the logic looks.

The fix is ensuring every complete class name Tailwind needs to generate appears as a literal string somewhere in a scanned file — typically through a lookup object or map where each possible complete class name is written out in full, even if you're selecting between them programmatically. The selection logic can still be dynamic; the class name strings themselves need to be static and complete for Tailwind's scanner to find them.

A related but distinct cause is a content configuration that doesn't actually cover every file where Tailwind classes appear — a Tailwind config file listing specific file paths or extensions that doesn't include a directory or file type your project actually uses will simply never scan those files at all, meaning any classes used exclusively there are silently excluded from the production build with no error or warning to indicate why.

This class of bug is especially confusing specifically because development mode often behaves differently — many dev setups rebuild CSS more permissively or with a broader effective scan, masking a content configuration gap that only becomes visible once an optimized production build runs the stricter, final content-scanning pass.

Class names coming from a third-party component library or a components folder outside your main source directory are a common specific trigger — if that directory isn't included in Tailwind's content configuration, any Tailwind classes used there (including ones referenced dynamically from your own code, compounding both issues at once) won't generate CSS, producing unstyled components that worked fine when that same code happened to run under more permissive development conditions.

To debug this systematically: search your production CSS output for the specific missing class name — if it's genuinely absent from the compiled CSS, the cause is scanning (either dynamic construction or a content-path gap), not a specificity or override issue elsewhere in your styles, which is a common wrong path people go down first when a class 'isn't working.'