Part 56: Tailwind CSS v4 Engine: CSS-First Configuration & @theme

Tailwind CSS v4 is rebuilt from the ground up on Oxide (a high-performance Rust engine) and adopts a modern CSS-First configuration model.

1. The Death of tailwind.config.js

In Tailwind v4, you configure themes directly in CSS using @theme:

@import "tailwindcss";

@theme {
  --color-brand-500: #3b82f6;
  --font-display: "Cabinet Grotesk", sans-serif;
  --spacing-128: 32rem;
}

Advantages of v4:

• 10x Faster Builds: Powered by the Rust-based Oxide engine.
• Zero JavaScript Config: Everything lives in native CSS variables.
• Native Lightning CSS Integration: Instant bundling and auto-prefixing.

Key Takeaways

• Tailwind v4 moves configuration into CSS using @theme and CSS variables.
• Powered by Rust for 10x compilation speeds.

In Part 57, we enter Module 10 to build Primitive UI Components: Buttons, Badges & Avatars!