Paste CSS property declarations and get the equivalent Tailwind CSS utility classes. Covers spacing, typography, layout, colors, borders, and more. Unknown properties are clearly flagged.
Tailwind CSS replaces traditional CSS property declarations with composable utility classes applied directly in HTML. Each class maps to a single CSS property and value: p-4 becomes padding: 1rem, flex becomes display: flex. When migrating existing CSS to a Tailwind project — or understanding what Tailwind classes to use for a given style — this converter gives you a fast starting point.
This tool performs a best-effort conversion based on Tailwind's default configuration scale. It handles spacing (margin, padding, gap), typography (font-size, font-weight, text-align, line-height), layout (display, flex, grid, position), sizing (width, height, min/max), borders (width, radius, style), overflow, opacity, z-index, cursor, and color keywords. CSS values that fall exactly on Tailwind's spacing scale (4px increments based on a 0.25rem base unit) will match directly. Values that fall between scale steps, or custom colors, will be shown as comments for manual attention.
Note that this converter cannot replicate Tailwind's responsive prefixes (md:, lg:), state variants (hover:, focus:), or arbitrary value syntax (w-[340px]). For values with no exact Tailwind equivalent, use Tailwind's arbitrary value brackets to apply the exact CSS value directly in your markup.