Tailwind v3 to v4 Migration Tool

Using the Tailwind v3 to v4 Migration Tool

What changed in Tailwind v4

Tailwind CSS v4 renamed several utilities so the size scales line up: the old bare shadow, blur, rounded and drop-shadow became the -sm step, and the old -sm step became -xs. outline-none is now outline-hidden, and the bare ring utility is now 1px, so a v3 ring becomes ring-3 to keep its width.

Opacity utilities are gone

v4 removes bg-opacity-*, text-opacity-*, border-opacity-* and the other opacity utilities. Use the slash modifier instead, so bg-white bg-opacity-75 becomes bg-white/75. The tool merges the pair when both classes sit on the same element and flags any opacity class it cannot merge.

Other renames handled

flex-shrink-* and flex-grow-* become shrink-* and grow-*, overflow-ellipsis becomes text-ellipsis, decoration-slice and decoration-clone gain a box- prefix, the important modifier moves to the end (font-bold!), and CSS variables in arbitrary values use parentheses: bg-(--brand). The three @tailwind directives become one @import "tailwindcss";.

What it does not do

Some v4 changes are about defaults, not class names: borders now default to currentColor instead of gray, ring colour defaults to the current colour, and configuration moves from tailwind.config.js into CSS with @theme. Those need a human decision, so the tool lists them as notes rather than guessing. Tailwind's official upgrade tool can also migrate a whole project.

Frequently asked questions