Skip to content

CSS to Tailwind Converter

Migrating a legacy CSS codebase to Tailwind is tedious. Every rule needs to be mentally translated from 'padding: 24px' to 'p-6', from 'display: flex' to 'flex', from 'box-shadow: 0 2px 8px...' to 'shadow-md'. This tool does the lookup for you. Paste any CSS rule block, get an ordered string of Tailwind utility classes ready to drop into your className attribute.

What It Maps

Full spacing scale — padding, margin, gap in pixels or rem, mapped to Tailwind's 4px-based scale (1=4px, 2=8px, 4=16px, 6=24px, etc.). Typography — font-size, font-weight (100-900), line-height, text-align, text-transform, text-decoration, font-style. Flex & Grid — display, flex-direction, justify-content, align-items, flex-wrap, grid-template-columns. Position & Size — position, top/right/bottom/left, width, height, min/max dimensions. Borders — width, style, color, radius with shorthand parsing. Arbitrary fallback — any value that doesn't match the scale gets wrapped in brackets: p-[13px], bg-[#f5a623].

📖
Deep Dive: The Complete CSS to Tailwind Guide
Spacing scale, color system, flexbox mapping, arbitrary values, responsive variants, and when not to convert — everything this tool does and what it can't do for you.
→

Frequently Asked Questions

What Tailwind version is this for?+
Targets Tailwind v3 conventions, which are compatible with v4 for the vast majority of utility classes. Arbitrary values with bracket syntax work in both.
What about pseudo-classes like :hover?+
This tool converts a single declaration block. For :hover, :focus, and other states, convert the base rule first, then wrap the resulting classes in the Tailwind variant prefix (hover:p-6 hover:bg-blue-500).
My box-shadow came out weird. Why?+
Tailwind's shadow utilities don't map 1:1 to arbitrary CSS shadows. The tool falls back to arbitrary syntax with underscores replacing spaces. For cleaner output, pick one of Tailwind's presets (shadow-sm, shadow-md, shadow-lg, shadow-xl) in your final output.

Built by Derek Giordano · Part of Ultimate Design Tools

Privacy Policy · Terms of Service