Tailwind CSS Converter

Migrating a codebase from hand-written CSS to Tailwind is mostly a mechanical task: translate each padding: 1rem to p-4, each display: flex to flex, and so on. Doing it by hand file by file is tedious and error-prone, especially when your CSS uses pixel values, custom colors, or mixed units. This converter automates the translation in both directions so you can paste CSS and get Tailwind classes, or paste Tailwind and see the CSS it expands to.

The mapping covers Tailwind's full utility vocabulary: spacing (margin and padding), sizing (width, height, max-*), typography (font-size, line-height, font-weight, letter-spacing), colors (background, text, border, ring), layout (flex, grid, gap, display), positioning, borders, shadows, opacity, transitions, and transforms. When a CSS value matches Tailwind's default scale, the converter uses the standard class. When it doesn't, the output uses arbitrary values syntax (p-[13px], bg-[#1a2b3c]) so the result is precise even for off-scale values.

Two use cases dominate. The first is migration: paste a block of CSS from a legacy stylesheet and get Tailwind classes to sprinkle into JSX or templates. The second is learning: paste a Tailwind class string and see the equivalent CSS, so you understand exactly what each utility does. A third bonus is auditing — pasting your component's current Tailwind classes and seeing the computed CSS helps spot redundancy and conflicts. Combined with the CSS formatter and Tailwind color finder, this tool is the quickest path between hand-written CSS and utility-first styles.

Tailwind CSS generates utility classes from a configuration that defines scales for spacing, colors, fonts, breakpoints, and more. In Tailwind v3, the default spacing scale is 0, 0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, ... where each number corresponds to multiples of 0.25rem (4px at the default 16px base). p-4 produces padding: 1rem, m-2 produces margin: 0.5rem, and so on. Tailwind v4 (2024 release) refines this with improved arbitrary values, faster builds, and native CSS variables.

Non-spacing utilities follow similar patterns. Colors use a semantic name plus a shade number: bg-blue-500 references the Tailwind blue palette at the 500 weight. Typography utilities map text-xs through text-9xl to specific font-size/line-height pairs. Breakpoints prefix classes (md:flex, lg:grid-cols-3) for responsive variants. Pseudo-class variants (hover:, focus:, active:) and state variants (dark:, disabled:) apply additional CSS conditions.

For any CSS value that doesn't match Tailwind's default scale, the converter uses arbitrary value syntax: p-[13px], bg-[#1a2b3c], text-[2.3rem]. These work in Tailwind v3.1+ JIT mode and allow full flexibility while keeping the utility-first approach. The tool also recognizes common CSS patterns that map to Tailwind's composable utilities — flex items-center justify-center for centering, grid grid-cols-3 gap-4 for grids — and suggests these combinations rather than individual properties.

Manual CSS-to-Tailwind migration is tedious and mistake-prone. Copilot and AI tools can convert but often hallucinate class names or miss arbitrary values. Official Tailwind documentation explains utilities but doesn't automate conversion. This tool is purpose-built for bidirectional conversion, supports both Tailwind v3 and v4, handles arbitrary values, responsive variants, pseudo-states, and dark mode. Fast, accurate, and the quickest way to migrate a codebase or learn Tailwind from CSS intuition.