TailwindCSS

Tailwind classes not applying (no styles, or some classes missing)

Tailwind class has no effect / styles missing in production build

In short: Tailwind only generates CSS for complete class names it can find in your source files.

Why it happens

Class names built by string concatenation ('bg-' + color + '-500') never appear whole in the source, so Tailwind doesn't generate them. Also: the CSS file with Tailwind isn't imported, files live outside the scanned paths (v3 content array, or v4 sources in ignored folders), or a v3/v4 setup mismatch.

How to fix it

1. Use full class names in code and map values to them: { red: 'bg-red-500', blue: 'bg-blue-500' }[color].
2. Confirm your global CSS (with @import "tailwindcss"; in v4, or @tailwind directives in v3) is imported in the root layout or entry file.
3. v3: check content in tailwind.config includes every folder with classes. v4: add @source "../path"; for folders it doesn't detect.
4. Restart the dev server and hard-refresh.

Copy-paste fix prompt

I'm getting this error in my app:

Tailwind class has no effect / styles missing in production build

[Paste the full error, stack trace, and the file it points to here]

Likely cause: Tailwind only generates CSS for complete class names it can find in your source files.

Task: Find Tailwind class names that are built dynamically or live in files Tailwind may not scan, rewrite them as complete static class names, and confirm the Tailwind CSS entry is imported.

Rules:
- First explain the root cause in 2 sentences and list the files you'll change.
- Make the smallest change that fixes it. Don't refactor unrelated code.
- Don't disable security or checks (RLS, auth, signature verification, type checking, CORS allow-all) to make the error disappear.
- Never print or hard-code secret keys.
- Finish by telling me exactly how to verify the fix.

Common with: Cursor, Bolt, Lovable, v0. Last reviewed 2026-11-13.