Tailwind CSS v3 → v4 Migration Helper

Paste your tailwind.config.js and get a CSS-first @theme block, a list of renamed and removed utilities, and a step-by-step upgrade checklist — with an optional live theme preview.

1 · Your v3 config

Paste tailwind.config.js (theme.extend is enough)

Or paste markup / class lists to scan (optional)

Prefix used in v3 config (if any)

Output colors as --color-* CSS variables Include @config compatibility shim Add @import "tailwindcss" + preflight note

2 · Options

Indent style

Spacing unit for numeric scale 0.25

Preview mode

Everything runs locally in your browser. Nothing is uploaded.

3 · Quick actions

Renamed / removed utilities found in your markup

Theme preview (uses values parsed from your config)

Acme UI

Migrated theme

This preview is rendered with the colors, radii and shadows detected in your pasted config, so you can sanity-check the tokens before shipping.

Info surface using the brand-50-ish token if present, otherwise the first brand shade.

✓ Copied!