CSS to Tailwind Converter

Hand-writing utility classes gets old fast

You’ve got a chunk of CSS from an old project, a CodePen, or a designer’s spec, and you’re porting it to Tailwind. Translating justify-content: space-between into justify-between from memory is fine for the first ten properties. Around the fortieth, you start guessing. Is it gap-4 or gap-16 for 16px? Does font-weight: 600 map to font-semibold or font-bold?

Paste the CSS on the left. Tailwind classes show up on the right, space-separated, ready to drop into a className. It runs as you type, so you can paste a whole rule and watch it translate line by line.

What translates cleanly

The common stuff maps to real, named Tailwind utilities:

• Layout: display, flex-direction, justify-content, align-items, flex-wrap, gap, position, overflow
• Spacing: padding and margin, including directional (padding-top) and shorthand like margin: 0 auto, which splits into my-0 mx-auto
• Sizing: width, height, and their min/max variants, with 100% becoming full and 100vh becoming screen
• Type: font-size, font-weight, line-height, letter-spacing, text-align, text-transform
• Borders: border-radius, border, border-color, mapped to rounded-* and border-*

For pixel values, the converter checks Tailwind’s spacing scale first. 16px is 4, 24px is 6, 8px is 2. When a value lands off the scale, say 17px, you get an arbitrary class like p-[17px] instead of a wrong guess.

Where it uses arbitrary values (and why that’s fine)

Here’s the honest part. Tailwind’s named color classes (text-red-500, bg-slate-800) come from a config you’d have to read at build time. There’s no way to know offline whether your #7C3AED is somebody’s bg-violet-600 or a one-off brand color. So colors always come out as arbitrary values: text-[#7c3aed], bg-[#1a1a22]. Same goes for any property the converter doesn’t have a named mapping for. It wraps the whole thing as [property:value], which Tailwind’s JIT engine compiles literally.

That means the output always works. You won’t get a class that silently does nothing. An odd clip-path or a vendor-prefixed property becomes [clip-path:...] and renders exactly like the original CSS. Arbitrary values aren’t a cop-out here. They’re how Tailwind handles the long tail by design.

One thing to keep in mind

This converts declarations, not stylesheets. Feed it the inside of one rule, the property: value; pairs, and it does its job. Paste a full file with five selectors, media queries, and @keyframes, and it’ll flatten everything into a single bag of classes with no idea which selector they belonged to. Pseudo-selectors like :hover and breakpoints don’t survive the trip either, because those live in the selector, not the declaration body.

So the workflow is: grab one rule at a time. The tool strips the selector and braces for you if you paste them, then you add hover: or md: prefixes by hand where you need them.

FAQ

Does it read my Tailwind config?

Nope. It runs entirely in your browser with no access to your tailwind.config.js. That’s exactly why colors and any custom spacing come out as arbitrary values instead of guessing at your theme tokens.

Why is my color a hex bracket instead of a named class?

Because matching #7C3AED to bg-violet-600 requires knowing your palette, which only exists at build time. The arbitrary form bg-[#7c3aed] is always correct, even if it’s less pretty than a named class.

Can I paste a whole CSS file?

You can, but you probably shouldn’t. It treats the whole thing as one flat set of declarations and loses every selector boundary. Convert one rule at a time for results that actually make sense.

What happens to properties it doesn’t recognize?

They become arbitrary classes, [property:value], which Tailwind compiles as-is. So even an exotic property gives you usable output rather than a dropped line or an error.

Do hover and responsive styles carry over?

No. Those are encoded in the selector and the media query, neither of which is part of a declaration block. You’ll add hover:, focus:, and breakpoint prefixes like md: yourself after pasting.

Is anything sent to a server?

Nothing leaves your machine. The conversion is plain JavaScript running locally, so it’s safe for CSS that references internal class names or unreleased design tokens.