Sohan Basak

Updated on Sat Aug 03 2024

Tailwind v3 to v4 Migration Utility

Convert your boring old Tailwind V3 to Tailwind V4!

Convert your Tailwind CSS color themes to the modern OKLCH color format Also convert your old Tailwind V3 themes to V4 theme directive.

Input Format:

Input JSON

Output CSS

About OKLCH Colors
OKLCH (Oklab Lightness-Chroma-Hue) is a perceptually uniform color space that's better for creating consistent color palettes. Values are structured as:
oklch(lightness% chroma hue)
  • Lightness: 0-100% (perceived brightness)
  • Chroma: 0+ (color intensity/saturation)
  • Hue: 0-360 (color angle on wheel)


Convert your Tailwind v3 files to Tailwind v4.


I know the pain. Here is a tool to ease it a little bit.


    

  1. Paste your Tailwind JSON or Tailwind.config.js
    2. 

  2. Click Convert
    3. 

  3. Copy your Tailwind V4
    4.