The Build Pipeline & Oxide Engine

Tailwind does not ship a giant stylesheet. It scans your source files, finds the class names you used, and generates exactly that CSS — nothing more.

Automatic Content Detection

In v3 you maintained a content: [] array of file globs. In v4 the Oxide engine detects template files automatically, ignoring things like .gitignored paths and binary files. You usually configure nothing.

When you do need to add a source Tailwind would not find on its own (a sibling package, a non-standard folder), point at it from CSS:

@import "tailwindcss";
@source "../shared-ui/src";

The Oxide Engine

v4’s engine is rebuilt in Rust and uses Lightning CSS for parsing, prefixing, and minification. The result is roughly an order of magnitude faster builds and near-instant incremental rebuilds in dev. Practically, this means you stop thinking about Tailwind’s build time at all.

The flow:

• Dev — Tailwind watches files, regenerates only changed CSS, hot-reloads.
• Build — it does one full scan, emits the minimal CSS, and Lightning CSS minifies it.

The Dynamic Class Gotcha

Detection works by finding class names as literal strings. This breaks the moment you build a class name by concatenation:

<!-- BROKEN: "text-red-500" never appears literally -->
<p class="text-{{ color }}-500">Hidden bug</p>

Tailwind never sees text-red-500, so it never generates it, and the style silently does nothing. The fix is to map to complete class names:

<!-- color is "text-red-500" or "text-green-500" — full, literal -->
<p class="{{ colorClass }}">Works</p>

Rule of thumb: the full utility must appear somewhere in your source exactly as it will be used.