Tailwind v3 to v4 Config Migrator
Convert tailwind.config.js theme objects to v4 CSS-first @theme blocks online for free. Flattened color and font variables, automatic OKLCH hints, and warnings for removed options - no upload.
Loading tool...
What is Tailwind v3 to v4 Config Migrator?
The Tailwind v3 to v4 Migrator converts your v3 theme object into a v4 CSS-first @theme block directly in your browser. Colors flatten into dashed --color- variables, font stacks become --font- variables, every hex color gets a computed OKLCH hint comment, and v3-only options like darkMode, container, corePlugins and safelist are flagged with migration guidance.
Key Benefits
- Skip rewriting theme variables by hand
- Nested palettes become valid dashed variable names
- Perceptual OKLCH hints computed with standard OKLab math
- Removed v3 options surfaced with what to use instead
- Private and instant - parsing runs in the browser
Common Use Cases
- •Upgrading a design system config to Tailwind v4
- •Extracting brand colors as CSS variables for non-Tailwind use
- •Auditing an old config for removed v3 options
- •Generating OKLCH values for existing hex palettes
How to Migrate a Tailwind Config to v4
- Paste the config: Paste your tailwind.config.js - at least the theme object with colors or fontFamily.
- Review the @theme block: The v4 CSS variables appear on the right, with OKLCH hints beside every hex color.
- Read the warnings: Removed v3-only options like darkMode or corePlugins are listed with migration guidance.
- Copy into your CSS: Copy the @theme block into your main stylesheet, or download it as a CSS file.
Key Features
- Colors and fontFamily extracted from any v3 config text
- Nested palettes flatten into dashed --color- variables
- DEFAULT keys collapse into the parent variable name
- Hex colors annotated with computed OKLCH hint comments
- Warnings for darkMode, container, corePlugins, safelist
- Copy or download the @theme block as a CSS file