Tailwind CSS v4 Complete Technical Blueprint: Performance & Styling

Tailwind CSS v4 is a ground-up rewrite of the framework engineered around modern web standards, native CSS capabilities, and lightning-fast compilation performance.

**TL;DR:** Tailwind v4 moves theme configuration out of JavaScript and into native CSS files using the `@theme` directive, powered by a Rust-based Oxide compiler that generates production CSS 10 times faster.

---

1. Key Architectural Shifts in Tailwind v4

In Tailwind v3, configuration was managed through a JavaScript object inside `tailwind.config.js`. Tailwind v4 adopts a **CSS-First Configuration** model, integrating directly with modern browser capabilities.

/* main.css in Tailwind CSS v4 */
@import "tailwindcss";

@theme {
  --font-sans: "Inter", system-ui, sans-serif;
  --color-primary: oklch(0.62 0.22 255);
  --color-primary-dark: oklch(0.48 0.24 255);
  --breakpoint-3xl: 120rem;
}

---

2. Speed & Compilation Benchmark Comparison

---

3. Advanced Features: OKLCH Colors & Container Queries

Tailwind v4 adopts the OKLCH color space by default, delivering hyper-vibrant colors that scale smoothly across light and dark display modes.

<!-- Native Container Query Example in Tailwind v4 -->
<div className="@container border rounded-xl p-4">
  <div className="flex flex-col @md:flex-row items-center gap-4">
    <img src="/avatar.jpg" className="w-16 h-16 rounded-full" />
    <div className="text-center @md:text-left">
      <h3 className="text-lg font-bold">Jane Doe</h3>
      <p className="text-sm text-gray-500">Senior Architect</p>
    </div>
  </div>
</div>