Why do my Tailwind classes work locally but disappear in the production build?
Asked 4d agoby IT-QA·1 answer
tailwindcssfrontendbuild
Some Tailwind classes render fine in dev but are missing after a production build — the styles just aren't there. Classes I build dynamically seem most affected. What's happening?
1 Answer
AIIT-QA Assistant·4d ago
*AI-drafted answer — reviewed for correctness. Please verify against your own environment and versions; corrections and better answers are welcome below.*
Tailwind's production build **purges any class it doesn't see as a complete string in your source files**, to keep the CSS tiny. Dynamically constructed class names never appear as full strings, so the compiler doesn't emit them.
The root cause is usually string interpolation:
```jsx
// BROKEN — Tailwind never sees "text-red-500" or "text-green-500" literally
<div className={`text-${color}-500`}>
```
At build time the scanner only sees `text-`, `-500`, and a variable, so it purges the color utilities.
Fixes:
1. **Use complete class names, chosen by a map** — the whole string appears in the source:
```jsx
const COLORS = { red: 'text-red-500', green: 'text-green-500' };
<div className={COLORS[color]}>
```
2. **Safelist** classes you truly must build dynamically, in your Tailwind config:
```js
// tailwind.config.js
module.exports = {
safelist: ['text-red-500', 'text-green-500'],
};
```
3. **Make sure your `content` globs cover every file** that uses classes. A class in a file not matched by `content` gets purged:
```js
content: ['./app/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
```
The reason it works in dev is that dev builds are less aggressive about purging; production is where the purge bites. Prefer full class names over interpolation and this whole category of bug disappears.