1
Diagnostic step 1
Identify patterns: search repository for template literal patterns and computed class strings (e.g., regex for `text-\${` or `\${color}-500`) and list all dynamic cases to decide per-case fix.
FULL AI ANALYSIS
Tailwind JIT classes stripped in Next.js production build when using dynamic template literals for class names
Generated Oct 13, 2026, 9:45:52 AM
Analysis summary
Tailwind JIT scans source files for literal class name strings. When class names are assembled from variables or nested template literals, JIT cannot statically detect them unless safelisted or generated via deterministic mapping at build time. The observed behavior (works in dev but not prod) often occurs because the dev JIT runs at runtime with full file access and dynamic evaluation, while the production Purge/content scanning is static and misses dynamic patterns. Safelist fixed it, indicating missed detection rather than a tool bug.
Possible causes
Dynamic class names built from runtime variables or nested template literals that tailwind's static scanner cannot detect in production
95%Use of computed names using variables derived from props or external data that the static analyzer cannot resolve
90%Custom extractor or content config that omits some file paths from Tailwind's content scan
30%Minification or transformation (e.g., SWC) changing string literals before Tailwind scanner runs (less likely given experiments)
5%Suggested fixes
2
Diagnostic step 2
Use safelist for true dynamic values: in tailwind.config.js add a safelist with a compact range (e.g., { pattern: /^text-(red|green|blue)-(100|200|300|400|500)$/ }) rather than enumerating every possible class to keep generated CSS minimal and reversible.
3
Diagnostic step 3
Replace dynamic assembly with deterministic mapping: convert constructs like `text-${color}-500` into a small lookup object mapping color names to class strings (e.g., const colorClass = { red: 'text-red-500' }[color]) so Tailwind sees literal class names.
4
Diagnostic step 4
Verify content globs and custom extractors: ensure tailwind.config.js content includes all app and component paths and that any custom extractor is not filtering valid tokens; run the Tailwind CLI content scan locally to preview which classes will be generated.
5
Diagnostic step 5
Add CI check: add a step in CI to run a Tailwind build and compare expected selectors (or critical CSS) so regressions from future refactors are caught early.