Design

Mastering Tailwind CSS v4 in Nuxt

P

Peter Magdy

20 May 2026 • 3 min read

Tailwind CSS v4 introduces a brand new CSS-first configuration model. Instead of relying on a Javascript config file, you define all your design tokens directly inside your CSS file using the new @theme directive.

@theme {
  --color-primary-500: #5d87ff;
}

This improves build times and aligns with standard CSS variable practices.