Tailwind Empty CSS - content Option Missing in CI

By Kaveh Alemi·Latchkey

Tailwind only keeps utilities it sees used in files matched by content. If those globs miss your templates, the scan finds nothing and the output collapses to a near-empty stylesheet - the deploy looks unstyled.

What this error means

The build "succeeds" but the page renders without styles, or the emitted CSS is only a few KB. There may be a warning that no utility classes were detected.

warn - No utility classes were detected in your source files. If this is
warn - unexpected, double-check the `content` option in your config.
warn - https://tailwindcss.com/docs/content-configuration

Common causes

content globs do not match templates

The globs point at the wrong directory or extension, so Tailwind scans no markup and purges everything.

Classes built dynamically

Class names assembled from string concatenation are not literally present, so the scanner cannot see them and purges them.

How to fix it

Point content at every template path

1. List all directories and extensions that contain class names.

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

Safelist dynamically built classes

1. Write full class names statically, or safelist the ones built at runtime.

// tailwind.config.js
safelist: ['bg-red-500', 'bg-green-500'],

How to prevent it

• Use full, static class strings so the scanner can detect them.
• Diff the emitted CSS size between builds to catch a sudden collapse to near-empty output.

Frequently asked questions

Related guides

References

• Node.js documentation
• npm CLI documentation
• GitHub Actions documentation