🎏

Tailwind ↔ CSS Converter

Convert between Tailwind utility classes and vanilla CSS — both directions. Supports ~200 utilities (spacing, color, flex, grid, typography). Useful for migration or learning Tailwind.

All tools

Tailwind classes

CSS

Convert between Tailwind utility classes and vanilla CSS. Supports ~200 common utilities (spacing, color, flex, grid, typography). Useful for migration or learning Tailwind.

When to use it

Learning Tailwind: paste familiar CSS → see the matching Tailwind class. Fastest way to learn utility names.
Migration: legacy CSS-in-JS / Sass codebase → Tailwind. Convert one component at a time.
Code review: a colleague paste CSS → check if a shorter Tailwind class exists.
Documentation: write blogs/docs about styling — show both flavors.
Email templates: emails can't use Tailwind classes → convert to inline CSS.

Supported utilities

Layout: display (block/flex/grid/hidden), position, flex-direction, items-*, justify-*.
Spacing: p-*, m-*, gap-* (scale 0-96).
Sizing: w-*, h-* (full, screen, auto, scale).
Typography: text-{size}, text-{color}, font-{weight}, text-align.
Colors: bg-*, text-*, border-* (gray, red, blue, green, yellow, amber, orange, purple, pink — 50/100/.../900 palette).
Borders: border, border-{n}, rounded, rounded-{xs/sm/md/lg/xl/2xl/3xl/full}.
Effects: shadow, opacity-{n}.
Misc: cursor, overflow, z-index.

Limitations

Responsive prefixes (sm:, md:) aren't handled — apply manually.
Dark mode (dark:) likewise.
Custom config (custom color palettes) isn't recognised — only the default Tailwind palette.
Arbitrary values [24px] need manual conversion.