Skip to content
Latchkey

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.

tailwind
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-configuration

Common 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

  1. List the directories and extensions that contain class names.
  2. Update the content array in the Tailwind config to match them.
  3. Re-run the build and confirm utilities appear in the output CSS.
tailwind.config.js
// 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 content globs 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.

Related guides

Tired of flaky CI? Latchkey auto-heals failed jobs and retries them for you. Start free →