Tailwind "content option" misconfigured, no utility classes generated in CI
Tailwind only emits utilities it sees used in files matched by the content globs. When those globs match nothing in a CI checkout, Tailwind warns and emits base styles only, so the deployed app looks unstyled.
What this error means
Tailwind prints "warn - No utility classes were detected in your source files" and the output CSS contains preflight but no utilities, only in the CI build.
warn - No utility classes were detected in your source files. If this is unexpected,
warn - double-check the `content` option in your Tailwind CSS configuration.
warn - https://tailwindcss.com/docs/content-configurationCommon causes
The content globs point at the wrong paths
The content array does not match where templates live in the repo, so Tailwind scans nothing and generates no utilities.
Case or extension mismatch on the case-sensitive runner
Globs that match on a case-insensitive local disk can match nothing on a Linux runner, leaving the content set empty.
How to fix it
Point content globs at real template files
- List the directories and extensions that contain class names.
- Update the
contentarray in the Tailwind config to match them. - Re-run the build and confirm utilities appear in the output CSS.
// tailwind.config.js
export default {
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx,vue}'],
};Match casing for case-sensitive runners
Ensure the glob extensions and directory names match the actual files exactly, since CI runs on a case-sensitive filesystem.
How to prevent it
- Keep the
contentglobs in sync with where markup actually lives. - Use lowercase, exact extensions so case-sensitive runners match.
- Inspect built CSS size in CI to catch an empty utility set early.