CSS to Tailwind Converter
Convert CSS properties to Tailwind CSS utility classes instantly. Paste your CSS and get the equivalent Tailwind classes. Supports spacing, sizing, colors, typography, flexbox, grid, borders, shadows, and more. Auto-converts as you type.
How to Convert CSS to Tailwind Classes
Paste your CSS rules into the left panel. The converter parses each property-value pair and maps it to the closest Tailwind CSS utility class. Properties without a direct Tailwind equivalent are listed separately so you can handle them with custom utilities or arbitrary values. The conversion happens instantly in your browser — no data is sent anywhere.
Why Convert from CSS to Tailwind
Tailwind CSS has become the most popular utility-first CSS framework, used by companies like GitHub, Netflix, and Shopify. When migrating existing projects or converting designs, you often have CSS properties that need to be translated to Tailwind classes. This tool automates the tedious part — mapping padding, margin, flexbox, colors, typography, and more to their Tailwind equivalents.
Supported CSS Properties
This converter handles 60+ CSS properties including: display, position, flex properties, grid, padding, margin, width, height, max/min dimensions, font-size, font-weight, text-align, color, background-color, border, border-radius, box-shadow, opacity, overflow, z-index, cursor, gap, and more. Complex values (gradients, animations, transforms) may require Tailwind's arbitrary value syntax [value].
Tailwind Arbitrary Values for Custom CSS
When a CSS value does not map to a standard Tailwind utility (e.g., padding: 13px), Tailwind supports arbitrary values with bracket syntax: p-[13px]. This converter generates arbitrary values automatically when no standard class matches. For complex properties, consider creating custom utilities in your tailwind.config.js.