Tailwind classes work in dev but disappear in production

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

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'],
};

Related resources

• Tailwind CSS cheat sheet
• CSS complete guide
• CSS Flexbox & Grid cheat sheet