Tailwind CSS v4: What's New and How to Use It

Tailwind CSS v4 is a major rewrite focused on speed and a simpler configuration story. If you're on v3, here's what's different and why it's worth upgrading.

A faster engine

The new Oxide engine dramatically speeds up build times — full builds and incremental rebuilds are both much faster, which you feel most in large projects and in the dev server.

CSS-first configuration

Instead of a large `tailwind.config.js`, v4 lets you configure your design tokens directly in CSS with `@theme`. Your colors, spacing, and fonts live alongside your styles as native CSS variables, which also makes them available at runtime for theming.

What you'll notice day to day

• Automatic content detection — no more manually listing template paths.
• Design tokens exposed as CSS variables, ideal for dark mode and theming.
• Modern CSS features (container queries, cascade layers) built in.
• A smaller, simpler setup with fewer moving parts.

Migrating from v3

Tailwind ships an upgrade tool that handles most of the mechanical changes. The main manual work is moving your theme config into CSS and double-checking any custom plugins. For most projects it's an afternoon, not a rewrite.

Every KitCraft template is already on Tailwind CSS v4 with a clean, token-based theme — so your colors and dark mode are driven by CSS variables you can customize in one place.