The Transition to Tailwind CSS 4 in Next.js 16

Building this portfolio involved adopting the bleeding edge of CSS utility frameworks: Tailwind CSS v4.

Tailwind v4 is a paradigm shift. It drops the tailwind.config.js file entirely in favor of native CSS variables.

The CSS-First Configuration

Instead of defining colors in JavaScript, we mapped our entire "Luxury Light & Airy" palette directly in globals.css using the new @theme directive.

@import "tailwindcss";
 
@theme {
  --color-background: oklch(0.99 0.01 85);
  --color-foreground: oklch(0.15 0.02 250);
  --color-primary: oklch(0.70 0.15 80);
}
 
@layer base {
  :root {
    --background: var(--color-background);
    --foreground: var(--color-foreground);
  }
}

Adopting OKLCH Colors

By moving to the OKLCH color space, we unlocked perceptual uniformity. When we calculate a 10% lighter shade of our primary gold, it mathematically maintains the same perceived lightness to the human eye, unlike traditional RGB or HSL manipulation.

Lightning Fast Builds

The new Rust-based engine in Tailwind v4, combined with Turbopack in Next.js 16, reduced our local CSS compilation time from ~1.2s to practically instantaneous (under 50ms). This velocity allows for rapid UI prototyping directly in the browser.