Tailwind v4 Converter

Convert Tailwind v3.5 to Tailwind v4.
Loading editor...
Loading editor...

Tailwind v4 Upgrade Guide

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)

Manual Updates

Some changes require manual CSS updates that can't be automated:

  • Container Customization: Use @utility container { ... } instead of container config options
  • Preflight Changes: Update placeholder colors, button cursors, dialog margins if needed
  • Custom Layer Definitions: Update @layer utilities to @utility
  • JavaScript Config Files: Use @config "tailwind.config.js" to load them explicitly
  • Theme Values in JavaScript: Use CSS variables instead of resolveConfig

More free tools

Device Mockup Generator Put a screenshot inside a phone, foldable or tablet frame and download the PNG. Color Picker from Image Drop in a photo and pick any color out of it as HEX, RGB or OKLCH. Color Picker Choose a color and convert it between HEX, RGB, HSL and OKLCH. Image to Mesh Gradient Turn an image into a soft mesh gradient you can copy as CSS. Beautiful CSS Gradients A collection of ready-made gradients, copy and paste.

Last updated