A
AiTechWorlds
AiTechWorlds
Translate Tailwind CSS class names between v2, v3, and v4 — highlights changed classes.
Translate Tailwind CSS classes between v2 / v3 / v4
Input
0 classesOutput
Translated output will appear here...
Major Tailwind v4 Changes
CSS-first configuration
No more tailwind.config.js — configure Tailwind directly in your CSS file using @theme.
@import "tailwindcss";
@theme {
--color-brand: #6366f1;
}New import syntax
Replace the old @tailwind directives with a single @import statement.
@import "tailwindcss";
CSS variables for theme values
All theme values are exposed as CSS custom properties (--color-*, --font-*, etc.).
color: var(--color-blue-500);
New utilities
v4 adds field-sizing, color-mix(), starting-style, and more modern CSS features.
.input { field-sizing: content; }The Tailwind Class Translator detects deprecated or renamed utility classes in your Tailwind CSS code and translates them to the equivalent class names in a newer version. It supports v2→v3, v3→v4, and v2→v4 translations, highlighting changed classes in yellow and removed classes in red.
Select translation direction
Choose v2→v3, v3→v4, or v2→v4.
Paste your classes
Paste class names or HTML with class attributes into the input area.
Review changes
Changed classes are highlighted in yellow, removed ones in red. Copy the translated output.
100% Private — No Server Required
All processing happens directly in your browser. No data is uploaded, stored, or transmitted to any server.