Tailwind v3 → v4 Config Converter

Paste your tailwind.config.js and get CSS-first @theme output for Tailwind v4. Handles colors, fonts, spacing, screens, animations, dark mode, and plugins.

@import "tailwindcss";

@theme {
  /* Converted output will appear here... */
}

What Gets Converted

Fully Converted

  • colors — flat and nested objects to --color-* variables
  • fontFamily — arrays to --font-* variables
  • spacing — custom values to --spacing-*
  • screens — breakpoints to --breakpoint-*
  • borderRadius — values to --radius-*
  • fontSize — with line-height and letter-spacing
  • animation + keyframes
  • darkMode — class and media strategies
  • prefix and important

Flagged for Manual Review

  • plugins — listed with migration guidance
  • content — v4 uses auto-detection
  • container — needs CSS-based approach
  • corePlugins — not applicable in v4
  • max-width screens — need @custom-variant
  • extend vs replace — detected and warned

About Tailwind CSS v4 Migration

Tailwind CSS v4 introduces a CSS-first configuration model, replacing the JavaScript-based tailwind.config.js with native CSS using @theme directives and CSS custom properties. This is a fundamental shift in how you configure your design system.

Instead of theme.extend.colors.brand in a JS file, v4 uses --color-brand: #1a1a2e inside a @theme block in your CSS. Font families become --font-sans, spacing becomes --spacing-*, and breakpoints become --breakpoint-*.

This converter handles the most common migration patterns automatically and flags anything that needs manual attention. It runs entirely in your browser — no data is sent to any server.

Key v4 Changes

  • No more tailwind.config.js — configuration lives in your CSS
  • @theme replaces theme/extend — all customizations are CSS variables
  • Automatic content detection — no need for content array in most cases
  • @import "tailwindcss" — single import replaces @tailwind directives
  • @plugin — new directive for JavaScript plugins
  • @custom-variant — CSS-native variant definitions

Need a Tailwind v4 dark theme?

Pre-built Tailwind v4 dark theme with CSS variables, semantic color tokens, and component presets. Ready to drop into any project.

Get Tailwind Dark Theme →