Tailwind CSS v4: The Zero-Runtime Evolution

Introduction

Tailwind CSS has always been fast, but v4 is a paradigm shift.

Previous versions were PostCSS plugins that scanned your files and generated a stylesheet. Version 4 is a ground-up rewrite using Rust, turning Tailwind into a standalone CSS engine that is up to 10x faster than its predecessor.

For a "Cleanup Specialist," this isn't just about speed; it's about Architectural Simplicity.

The Problem: The "Config Bloat"

In Tailwind v3, your tailwind.config.ts was a giant ball of JSON that grew over time. It was a separate file that decoupled your design tokens from your actual CSS.

The Solution: Everything in CSS

In v4, your configuration happens directly in your CSS files using native @theme variables. It leverages modern CSS primitives like Cascade Layers (@layer) and Custom Properties by default.

@import "tailwindcss";

@theme {
  --color-primary: #0ea5e9;
  --font-sans: "Geist Sans", sans-serif;
}

/* Use it immediately in your HTML */
<div class="text-primary font-sans">Vibe Coding Cleanup</div>

Why it Wins: Native Performance

Tailwind v4 is built for the Baseline 2025 browser. It assumes your browser supports modern CSS, which allows it to generate much cleaner, more performant code without the need for complex polyfills.

Trade-offs: The Breaking Changes

The move to a native-first approach means some legacy patterns (like certain complex @apply rules) have been deprecated. If you have a massive v3 codebase, the migration requires a dedicated "Cleanup" sprint.

Conclusion

The web is moving toward "Native-first" solutions. Tailwind v4 is the bridge that allows us to use high-level utility classes while staying close to the underlying power of the platform.

What to do next: Install the Tailwind v4 alpha/stable. Create a new project. Notice that you don't even need a tailwind.config.js file anymore. Welcome to the future of CSS.

---

I use Tailwind v4 to power the "Obsidian Stealth" theme of this very portfolio. Examine the source code.