ToolsTailwind v3 → v4 Migrator

Tailwind v3 to v4 Migrator

Paste Tailwind CSS v3 source — globals, component CSS, or HTML — and get the v4-compatible version. Handles shadcn theme tokens,@tailwinddirectives, linear gradients, CSS variable arbitrary values, and theoutline-noneaccessibility rename.

Tailwind v3 inputPaste CSS or HTML

Tailwind v4 output

@import "tailwindcss";
@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 240 10% 3.9%;
    --primary: 240 5.9% 10%;
  }
}

.btn-primary {
  background: var(--color-primary);
  color: var(--color-primary-foreground);
  border: 1px solid var(--color-border);
}

/* Component markup */
<div class="bg-linear-to-br from-sky-500 to-violet-500 outline-hidden">
  <span class="bg-(--theme-bg) text-(--theme-fg)">Hello</span>
</div>

Transforms applied

3× Shadcn theme tokens — hsl(var(--token)) → var(--color-token)
3× @tailwind directives — @tailwind base / components / utilities → @import "tailwindcss"
2× CSS variable arbitrary values — utility-[--var] → utility-(--var)
1× Gradient utility rename — bg-gradient-to-* → bg-linear-to-*
1× outline-none semantics — outline-none → outline-hidden (accessibility behavior changed in v4)

A few things to know

The transform is conservative — only patterns whose meaning is unambiguous are auto-converted. Renames that silently change visual output (default shadow scale, ring width, border color) are NOT applied. Review the v4 release notes for those.
For the shadcn theme tokens to work in v4 you still need to expose them via @theme inline in your CSS — the variable rename is only half the migration.
This tool runs entirely in your browser. Your code is not sent to any server.