Tailwind v4: CSS Variable Architecture

Tailwind CSS v4 introduces a major rewrite to the utility engine, completely removing legacy configurations like `tailwind.config.js` and replacing them with modern, native CSS custom variables.

1. Setting Up Your Theme via CSS Variable Injections

Rather than relying on complex JavaScript object structures, design tokens are now declared directly inside your main global stylesheet using a clean, modern `@theme` declaration block. This lets the compiler generate blazing-fast design variables natively during the build phase.

/* global configuration: src/app/globals.css */
@import "tailwindcss";

@theme {
  --color-brand-primary: #4f46e5;
  --color-brand-bg: #fcfcfd;
  --color-brand-main: #0f172a;
  
  --font-sans: "Inter", system-ui, sans-serif;
  --radius-xl: 1.5rem;
}

2. Seamless Theme Updates with No Runtime Performance Cost

Because these utility configurations map cleanly to native CSS variables, implementing feature toggles like system dark mode no longer requires heavy JavaScript hydration calculations. You can simply update variable definitions within class rules (like `.dark`), and the entire theme adapts instantly across all layouts with zero lag.