Performance, Purging, and Production Tips

Keeping Your Bundle Tiny

Tailwind v4 scans your source files and only emits CSS for classes that actually appear in them. This happens automatically — there is no manual content array to configure.

What the Scanner Looks For

The scanner uses a static string search. It finds any token that looks like a Tailwind class. This means you must write complete class names — never concatenate partial strings.

<!-- BAD: scanner cannot see "text-red-500" or "text-green-500" -->
<!-- const cls = `text-${color}-500` -->

<!-- GOOD: write complete class names -->
<!-- const cls = color === "error" ? "text-red-500" : "text-green-500" -->

Safelist for Dynamic Classes

If a class is generated dynamically (from a CMS, API, or database), add it to the safelist so it is always emitted.

@import "tailwindcss";

@source "../content/**/*.mdx";

@safelist {
  bg-red-500;
  bg-green-500;
  bg-amber-500;
}