Tailwind CSS v4 Architecture: CSS-First Configuration and Performance

Tailwind CSS v4 is a total engine rewrite from the ground up. Gone is the JavaScript-based tailwind.config.js file; in its place stands a CSS-first configuration system powered by the Rust-based Oxide engine.

What Changed in Tailwind CSS v4?

1. Oxide Rust Engine: Up to 10x faster compilation with instant incremental rebuilds.
2. Pure CSS Configuration: Configure design tokens using @theme directives inside standard main.css.
3. Automatic Content Detection: No more manual content: [...] glob arrays. Tailwind automatically discovers templates in your workspace.
4. Native CSS Variables Integration: All design tokens map directly to native CSS custom properties.

Configuring @theme in Tailwind v4

Here is an example of our minimalist brutalist theme configuration:

@import "tailwindcss";

@theme {
  --font-sans: "Geist Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "Geist Mono", monospace;

  /* Custom Color Tokens */
  --color-brand-black: #0a0a0a;
  --color-brand-zinc: #27272a;
  --color-brand-accent: #3b82f6;

  /* Strict 8px Brutalist Corner Radius */
  --radius-sm: 8px;
  --radius-md: 8px;
  --radius-lg: 8px;
  --radius-xl: 8px;

  /* Flat Brutalist Shadows (Disabled) */
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
}

Migration Tips from v3

• Replace @tailwind base;, @tailwind components;, @tailwind utilities; with a single @import "tailwindcss";.
• Remove postcss.config.js if you are using @tailwindcss/vite or @tailwindcss/postcss.
• Replace theme.extend JavaScript configs with declarative @theme blocks.

Tailwind v4 delivers cleaner codebases and eliminates build friction for modern web apps.