Tailwind Styles Missing in Build - Fix the content Config

Tailwind only generates the classes it sees referenced in the files listed in content. If those globs miss your templates, the build scans nothing, generates almost no CSS, and the deployed site renders unstyled - even though dev looked fine.

What this error means

The build succeeds but the production site is unstyled or missing utility classes, while npm run dev looked correct. The output CSS is tiny because the scanner found no class usages.

build output

# build "succeeds" but the emitted CSS is nearly empty:
$ ls -la dist/assets/*.css
-rw-r--r--  1 ci  ci  4.1K main-abc123.css   # should be ~20-50KB
# warning (older Tailwind):
warn - No utility classes were detected in your source files.

Common causes

content globs do not match templates

The content array points at the wrong directories or extensions (e.g. ./src/**/*.{html} but components are .tsx), so the scanner sees no class usage and generates next to nothing.

Dynamic class names not scannable

Class names built by string concatenation (bg-${color}-500) never appear literally in source, so the JIT scanner cannot detect them and they get dropped from the build.

How to fix it

Point content at every template

List all paths and extensions where class names appear.

tailwind.config.js

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

Make dynamic classes detectable

Avoid building class strings from fragments; write full class names literally.
Map states to complete class strings (isActive ? "bg-blue-500" : "bg-gray-200").
As a last resort, list unavoidable dynamic classes in safelist.

How to prevent it

Keep content globs in sync with where components live.
Write full literal class names so the JIT scanner detects them.
Diff the emitted CSS size in CI to catch an empty build early.