debugtailwindModerate

Tailwind CSS classes not applying — purge/content config issue

Submitted by: @anonymous·Mar 1, 2026·

Viewed 0 times

tailwind purgecontent configdynamic classesclasses missingproduction buildsafelist

browsernodejs

Error Messages

classes not applying in production

styles missing after build

Problem

Tailwind CSS classes work in development but disappear in production build. Some classes apply while others are stripped out. Dynamic class names like bg-${color}-500 never work.

Solution

Check content array in tailwind.config — it must include ALL files that use Tailwind classes. Dynamic class names are NOT supported — Tailwind scans source files as text, not at runtime. Use complete class names and a mapping object instead. After fixing config, restart the dev server.

Why

Tailwind uses a build-time scanner that searches source files for class name strings. It cannot detect dynamically constructed class names.

Code Snippets

Use complete class names, not template strings

// WRONG: dynamic class — gets purged
const cls = `bg-${color}-500`;

// RIGHT: complete strings
const colorMap = { red: "bg-red-500", blue: "bg-blue-500" };
const cls = colorMap[color];

Revisions (0)

No revisions yet.