Tailwind v4 Converter

CSS Imports

Replace @tailwind directives with @import "tailwindcss";

Renamed Utilities

• shadow-sm → shadow-xs
• shadow → shadow-sm
• drop-shadow-sm → drop-shadow-xs
• drop-shadow → drop-shadow-sm
• blur-sm → blur-xs
• blur → blur-sm
• backdrop-blur-sm → backdrop-blur-xs
• backdrop-blur → backdrop-blur-sm
• rounded-sm → rounded-xs
• rounded → rounded-sm
• outline-none → outline-hidden
• ring → ring-3

Removed Deprecated Utilities

• bg-opacity-* → bg-black/50
• text-opacity-* → text-black/50
• border-opacity-* → border-black/50
• divide-opacity-* → divide-black/50
• ring-opacity-* → ring-black/50
• placeholder-opacity-* → placeholder-black/50
• flex-shrink-* → shrink-*
• flex-grow-* → grow-*
• overflow-ellipsis → text-ellipsis
• decoration-slice → box-decoration-slice
• decoration-clone → box-decoration-clone

Default Colors & Widths

• Border color: gray-200 → currentColor (specify colors explicitly)
• Ring width: 3px → 1px (use ring-3 for previous behavior)
• Ring color: blue-500 → currentColor (specify colors explicitly)

Variant Stacking Order

v3: right-to-left (first:*:pt-0) → v4: left-to-right (*:first:pt-0)

Space Between Utilities

The selector used by space-x-* and space-y-* has changed. Consider using flex/grid with gap-* instead.

CSS Variables in Arbitrary Values

bg-[--brand-color] → bg-(--brand-color)

Utility Prefixes

In v4, prefixes look like variants: tw-flex → tw:flex

Custom Utilities & Layers

Replace @layer utilities with @utility (requires manual edit)