Tailwind CSS v3 to v4 Theme Converter

Migrate legacy JavaScript tailwind.config.js theme extensions into modern Tailwind CSS v4 CSS @theme variables.

Tailwind v3 JavaScript Config (tailwind.config.js)

Modern Tailwind CSS v4 CSS @theme Block

@import "tailwindcss";

@theme {
  /* Custom Colors */
  --color-brand-50: #f0fdf4;
  --color-brand-500: #22c55e;
  --color-brand-900: #14532d;
  --color-50: #f0fdf4;
  --color-500: #22c55e;
  --color-900: #14532d;
  --color-accent: #3b82f6;
  --color-card: #1e293b;

  /* Font Families */
  --font-sans: Inter, sans-serif;
  --font-mono: Fira Code, monospace;

  /* Border Radius */
  --radius-4xl: 2rem;

  /* Custom Spacing */
  --spacing-128: 32rem;

}

Migrating to Tailwind CSS v4 CSS-First Architecture

Tailwind CSS v4 replaces the legacy JavaScript configuration file (tailwind.config.js) with a native, CSS-first architecture. In v4, design tokens and custom utility extensions are declared directly in your main stylesheet using standard CSS variables inside the @theme directive.

Key Syntax Changes

CSS Variables: Colors like theme.extend.colors.brand[500] become --color-brand-500: #22c55e; inside @theme.
Automatic Utilities: Declaring --color-brand-500 automatically creates bg-brand-500, text-brand-500, border-brand-500, and ring-brand-500 utility classes.
Zero Build Config: No plugins or custom postcss configuration files are required—simply import Tailwind via @import "tailwindcss";.