Tailwind v3 to v4 Class Name Changes
Upgrading a project from Tailwind CSS v3 to v4 involves more than updating the package version. Several utility classes were renamed, reorganized, or replaced with CSS variable equivalents. Our converter provides a searchable reference of every class name change so you can find the v4 equivalent for any v3 class in seconds.
Key class-level changes include: shadow utilities now use CSS variables (shadow-sm is still there but implemented differently), ring utilities changed in several edge cases, and some color utilities were renamed for consistency. The converter shows before-and-after for every changed class.
For large-scale migrations, use the tool in combination with global find-and-replace. Identify the most-used changed classes in your codebase with grep, verify the v4 equivalents here, then run the replacements. This is faster than reading the full changelog and less risky than running the automated migrator on a complex codebase.
Tips
grep -r "shadow-md" src/finds all usages of a class — pair with this tool to find replacements.- Tailwind v4 uses the
oklchcolor space for default colors — visual appearance may differ slightly from v3. - The
divide-*utilities had breaking changes in v4 — check every usage. - After migration, run your visual regression tests — subtle color and spacing shifts happen even with "equivalent" classes.