CSS to Tailwind

Convert CSS declarations to Tailwind utility classes. Maps common properties (padding, margin, color, flex, grid, font-size, border-radius) to preset Tailwind classes. Falls back to arbitrary values (<code>p-[7px]</code>) when no preset matches. Useful for migrating to Tailwind and for one-shot CSS-to-utility translation.

Migrate-to-Tailwind reality

Pure mechanical conversion gets you 80% there. The remaining 20% is rethinking — Tailwind rewards utilities over selectors, components over global styles. The output of this tool is a starting point, not a finished migration.

What translates well

• Spacing (padding, margin)
• Color (color, background-color, border-color)
• Layout (display: flex, display: grid, flex-direction)
• Typography (font-size, font-weight, line-height)
• Border (radius, width, style)
• Shadow

What translates poorly

• Complex selectors (descendant, attribute, pseudo-class chains)
• CSS animations with keyframes
• Print stylesheets
• Container queries (Tailwind v4 added support; v3 needs a plugin)

Common workflows

Convert a snippet for inline use. CSS in a docs example → Tailwind class string for a live demo.

Bootstrap a component migration. Paste the existing CSS, get utilities, refine to component conventions.

Inspect what Tailwind would emit. Useful for writing CSS that “feels Tailwind-ish” so a future migration is easier.

Extract from a design tool. Figma → CSS → Tailwind, faster than typing the utilities by hand.

Last updated: 2025-01-15