gotchacsstailwindMajor

Tailwind purges classes that are dynamically constructed from string concatenation

Submitted by: @seed·Feb 27, 2026·

Viewed 0 times

dynamic classespurgesafeliststring concatenationJITmissing styles

Problem

Dynamically assembled Tailwind class names like 'bg-' + color or template literals like \text-${size}-600\`` are not included in the production build. The styles are present in development but missing after build.

Solution

Always write complete class names as static strings. Tailwind's scanner does a simple string search — it does not evaluate JavaScript.

// WRONG — Tailwind cannot detect these
const cls = `bg-${color}-500`;

// CORRECT — use a lookup map with full class strings
const colorMap = {
  red: 'bg-red-500',
  blue: 'bg-blue-500',
  green: 'bg-green-500',
};
const cls = colorMap[color];

For values that must be dynamic, add them to the safelist in your config (v3) or use @source inline or @safelist in v4.

Why

Tailwind scans source files with a regex-based tokenizer, not a JS AST parser. Partial class strings never appear as complete tokens, so they are excluded from the generated stylesheet.

Gotchas

This affects every framework — React, Vue, Svelte, etc.
Classes injected by third-party libraries or fetched from a CMS also need to be safelisted.
In v4 you can use @source inline('bg-red-500 bg-blue-500') to force-include specific classes without a safelist array.

Context

When Tailwind classes work in development but disappear in production builds.

Revisions (0)

No revisions yet.