Using Theme Variables

Purpose

Define custom design tokens using the @theme directive with CSS variables. Tailwind v4 uses modern color formats (oklch) and namespace-based utility generation.

Basic Theme Variables

@import 'tailwindcss';

@theme {
  --font-display: 'Satoshi', 'sans-serif';
  --font-body: 'Inter', 'sans-serif';

  --color-brand-primary: oklch(0.65 0.25 270);
  --color-brand-accent: oklch(0.75 0.22 320);

  --breakpoint-3xl: 120rem;