Tailwind classes work in dev but disappear in production

Tailwind purges unused classes in production. If your classes are dynamic, they get removed.

Why this happens

Tailwind scans your source files for class names at build time using simple string matching — it doesn’t execute JavaScript. If a class name is constructed dynamically (e.g., string interpolation), Tailwind can’t detect it and removes it from the production CSS. In dev mode, Tailwind generates all classes on-demand, so everything appears to work.

Fix 1: Check your content config

// tailwind.config.js
module.exports = {
  content: [
    './src/**/*.{js,jsx,ts,tsx}',
    './public/index.html',
  ],
};

Fix 2: Don’t construct class names dynamically

// ❌ Tailwind can't detect these
const color = 'red';
<div className={`bg-${color}-500`} />

// ✅ Use complete class names
const bgColor = isError ? 'bg-red-500' : 'bg-green-500';
<div className={bgColor} />

Fix 3: Safelist classes

// tailwind.config.js
module.exports = {
  safelist: ['bg-red-500', 'bg-green-500', 'bg-blue-500'],
};

Alternative solutions

Use safelist patterns for dynamic classes that follow a predictable format:

module.exports = {
  safelist: [
    { pattern: /bg-(red|green|blue)-(400|500|600)/ },
  ],
};

Prevention

• Always write complete class names in your source code — never concatenate partial class strings.
• Add component library paths (e.g., node_modules/@your-org/ui/**/*.js) to the content array if classes come from external packages.

Related resources

• Tailwind CSS cheat sheet
• Tailwind vs CSS Modules

Related: Tailwind Classes Not Applying fix · CSS Flexbox & Grid cheat sheet