CSS to Tailwind Converter
Convert CSS properties to Tailwind CSS utility classes. Supports layout, spacing, typography, colors, and more. See unmatched properties. Free, 100% in your browser.
Unmatched CSS (no Tailwind equivalent found):
Reference
What is CSS to Tailwind conversion?
Tailwind CSS is a utility-first CSS framework where you style elements using pre-defined classes like flex, p-4, and text-center instead of writing custom CSS. This tool maps common CSS properties to their Tailwind equivalents. Paste CSS declarations and get the corresponding Tailwind class string. Properties without a direct Tailwind match are shown separately.
Supported conversions
Layout — display, position, flex, grid properties. Spacing — padding, margin, gap, width, height with Tailwind's spacing scale. Typography — font-size, font-weight, text-align, text-transform, letter-spacing, line-height. Colors — background-color, color, border-color with hex values (as arbitrary values). Borders — border-radius mapped to Tailwind's rounded scale. Effects — opacity, cursor, overflow, visibility, white-space. Arbitrary values — hex colors are converted to Tailwind arbitrary value syntax like bg-[#3b82f6].
Privacy
All conversion runs 100% in your browser. No data is sent to any server.