Performance & Bundle Size

Tailwind only emits the classes you use. Understand source detection, @source, and the v4 Oxide speed story.

4 min read Level 2/5 #tailwind#performance#oxide

What you'll learn

Understand automatic content detection and @source
Keep class names statically analyzable
Measure the generated CSS

Tailwind generates only the utilities your code actually references, so production stylesheets are tiny — typically a few kilobytes gzipped regardless of project size.

Automatic Content Detection

Tailwind v4 scans your project automatically, respecting .gitignore and skipping binary files. There is no content array to maintain. Add extra sources only when something lives outside the default scan:

@import "tailwindcss";

@source "../node_modules/some-ui-lib";
@source not "../legacy";

@source widens the scan; @source not excludes a path you do not want detected.

Keep Classes Statically Analyzable

Detection works by finding complete class strings in source text. Fragmented names defeat it and tempt you into bloated safelists:

// Not detected -> tempts a giant safelist workaround
<div className={`text-${size}`} />

// Detected -> stays lean
const text = { sm: 'text-sm', lg: 'text-lg' };
<div className={text[size]} />

Measure It

Build for production and check the output size — it should stay small even as the app grows:

npx @tailwindcss/cli -i src/app.css -o dist/out.css --minify
gzip -c dist/out.css | wc -c

The Oxide Engine

The v4 engine, Oxide, is written in Rust. Full builds are dramatically faster than v3 and incremental rebuilds are typically sub-100ms, so the dev feedback loop stays instant.

Debugging & Common Pitfalls →