Understanding Tailwind CSS v4 Color System

What Changed in v4

Tailwind CSS v4 replaces the JavaScript config with CSS-first configuration and uses oklch() internally for all default colors. This means better perceptual uniformity across shades and native wide-gamut support.

CSS-First Configuration

@theme {
  --color-brand: oklch(0.7 0.15 200);
  --color-brand-light: oklch(0.9 0.05 200);
  --color-brand-dark: oklch(0.4 0.12 200);
}

/* Usage in markup */
/* <div class="bg-brand text-brand-light"> */

Key Differences from v3

• Colors defined in CSS via @theme, not in tailwind.config.js
• oklch() used internally for better perceptual uniformity
• Wide-gamut P3 colors supported natively without workarounds
• No JavaScript config file needed for basic color customization
• Color utilities auto-generated from @theme namespace

Migrating Custom Colors

/* Before (v3 - tailwind.config.js) */
/* colors: { brand: { 500: '#3b82f6' } } */

/* After (v4 - your CSS file) */
@theme {
  --color-brand-500: #3b82f6;
  --color-brand-600: #2563eb;
}