Tailwind CSS v4 generates inconsistent / invalid utility output in certain environments

[mansoor200x]

Describe the issue

I’m running into an issue where Tailwind CSS v4 either:

fails to generate expected utilities,
generates incomplete CSS,
or outputs inconsistent styles depending on the environment/build setup.

The issue appears intermittently across different setups (Vite, PostCSS, monorepos, Docker, etc.), which makes debugging difficult.

In some cases:

certain utilities are ignored entirely,
only partial styles apply,
or the generated CSS output becomes invalid/incomplete.
Reproduction

Minimal reproduction:

Tailwind CSS v4
Vite / React / TypeScript setup
Standard installation flow from the docs

Observed behaviour:

Some classes compile correctly
Others silently fail or do not appear in output CSS
Restarting the dev server sometimes changes the behaviour
Expected behaviour

Tailwind should consistently generate all valid utilities regardless of environment or filesystem structure.

Additional context

I’ve tested:

clearing caches,
reinstalling node_modules,
fresh project setup,
switching between PostCSS and Vite plugins,
updating Node.js,
checking content paths/globs,
monorepo vs standalone setups.

The behaviour still persists.

This may be related to:

file scanning/content detection,
v4 source resolution,
watcher behaviour,
or environment-specific caching.

Would appreciate clarification on whether this is:

a known v4 regression,
expected behaviour,
or a configuration issue that needs additional documentation.

[wongjn]

Consider checking:

• You've done a git init in the root folder of the project. Tailwind uses git ignore rules internally for automatic source detection. If you have a .gitignore (or equivalent) higher in the directory tree, this may cause Tailwind to ignore files. Initializing a git repo creates a boundary to this.
• String concatenation/interpolation is not used to build class names.
• The class names would resolve to Tailwind classes that Tailwind would generate a rule for.

Consider providing a git repo that reproduces the issue and we can take a look for you. Currently, your post seems to be too vague and too broad in scope.

You can also run a compilation with DEBUG=* environment variable to get a log file dump to debug Tailwind scanning behavior.

[mg1986jp]

This is almost certainly a content detection issue. Tailwind v4 changed how it finds your source files — it uses automatic source detection based on your project's git root and .gitignore rules, instead of the old content array from v3.

The most common causes of classes silently not generating:

1. No git repo initialized. v4 walks up the directory tree looking for a .git folder to determine the project root. If there's none (or it's way up in a parent directory), the scan boundary is wrong and files get missed. Run git init if you haven't.

2. .gitignore is excluding your source files. v4 respects gitignore rules for performance. If your source files live in a directory that's gitignored (common in monorepos where build artifacts and source share parent dirs), they won't be scanned. Check with:

   git check-ignore -v src/components/SomeFile.tsx

3. Dynamic class names. Same as v3 — bg-${color}-500 won't work. Tailwind scans static strings only.

4. Files outside the detected source root. In monorepos, if your CSS entry point is in packages/ui but components are in packages/app, you need to explicitly add sources:

   @import "tailwindcss";
   @source "../../packages/app/src";

The intermittent behavior (works after restart) points to the watcher not picking up file changes correctly. The DEBUG=* env var will dump what files Tailwind is actually scanning — that's the fastest way to narrow it down.

Can you share your directory structure and where your CSS entry point lives relative to the git root?