Tailwind CSS — classes missing from production build

Tailwind CSS purges classes that are dynamically constructed or in files outside the content configuration, causing missing styles in production but not in dev.

beginnerdebuggingtailwindbuild

Symptoms

Styles work in dev but are missing in production build
Dynamically constructed class names like `bg-${color}-500` are purged
Classes in a newly added component file do not appear

Possible causes

Class names are constructed via string interpolation so Tailwind cannot detect them statically
The component file is not in the content glob patterns
Classes are in a .ts or .json file not covered by content config

Diagnosis steps

Check the content configuration

cat tailwind.config.ts | grep -A10 content

Interpretation

The content array must include all files that contain class names.

Search for dynamic class construction

grep -rn 'bg-' src/

Interpretation

Template literal class names are not detected by the scanner.

Root cause

Tailwind CSS scans source files for class names at build time; dynamically constructed names or files outside the content paths are not detected and the classes are purged.

Fix

Add all source file paths to the content array, use complete class names instead of interpolation, or add a safelist for dynamic classes.

Verify the fix

Build for production and confirm the previously missing styles are present in the output CSS.

Symptom walkthrough

Tailwind CSS purges classes that are dynamically constructed or in files outside the content configuration, causing missing styles in production but not in dev. The error appears in production but may not surface in local development because the conditions that trigger it depend on the deployment environment or runtime configuration. Understanding the full symptom set helps distinguish this issue from similar errors.

Diagnosis in practice

Follow the diagnosis steps in the frontmatter to isolate the cause. Each step includes a command and an interpretation of the output. The goal is to narrow down whether the issue is in the configuration, the runtime, or the application code. Reproduce the error in a minimal setup before applying a fix.

Root cause

Tailwind CSS scans source files for class names at build time; dynamically constructed names or files outside the content paths are not detected and the classes are purged.

Fix

Add all source file paths to the content array, use complete class names instead of interpolation, or add a safelist for dynamic classes. After applying the fix, monitor the system to confirm the error does not recur under load or in different environments.

Verification

Build for production and confirm the previously missing styles are present in the output CSS. If the verification passes, the fix is confirmed; if not, re-examine the diagnosis steps for missed contributing factors.

Diagnostic commands

Run these commands to reproduce and diagnose the issue:

cat tailwind.config.ts | grep -A10 content
grep -rn "bg-\${" src/