RunLocalTools

CSS to Tailwind Converter — Turn Existing CSS Into Utility Classes

Paste raw CSS and get the closest matching Tailwind utility classes, with exact matches, rounded approximations, and arbitrary-value fallbacks clearly labeled. Free, no signup, runs entirely in your browser.

BODY:

What it does

Paste CSS — a full rule block, several selectors, or a bare list of property: value declarations — and this tool converts each declaration into the equivalent Tailwind utility class. It’s built for migrating an existing stylesheet or component library onto Tailwind without hand-translating every value, and for anyone who wants to know what a chunk of legacy CSS “would look like” in utility classes before committing to a rewrite.

How it works

Every declaration is checked against Tailwind’s default theme scales — spacing, the full 22-color palette, font sizes, border radius, shadows, and more — using the same reference values Tailwind itself ships with, not an approximation. Colors are matched by nearest RGB distance when there’s no exact hex match; lengths are matched against the 0.25rem spacing scale.

Each converted class is tagged with how confident the match is:

  • Exact match — the CSS value lines up precisely with a Tailwind scale step.
  • Rounded to nearest scale value — only shown in Loose mode; the value is close but not exact (e.g. 15px padding rounds to p-4, which is 16px), and the original value is kept in a tooltip so nothing is hidden.
  • Arbitrary value — no scale value is close enough, so the tool falls back to Tailwind’s [...] bracket syntax with your original value preserved exactly.

Strict mode never rounds — anything off-scale becomes an arbitrary value, so the visual result is always pixel-identical to your original CSS. Loose mode snaps close values onto the design system’s scale instead, trading a small amount of precision for classes that read like hand-written Tailwind.

Shorthand properties are expanded properly: padding: 10px 20px becomes py-[10px] px-5 (or collapses to a single p-* class when all four sides match), and margin: 0 auto correctly becomes mx-auto rather than a broken arbitrary value. Properties Tailwind has no reliable one-to-one utility for — background and font shorthands, gradients, and multi-function transform values — are listed separately as “couldn’t convert” rather than guessed at.

How to use it

  1. Paste a CSS rule (with or without a selector) into the input box, or click “Try example.”
  2. Choose Strict or Loose matching mode depending on whether pixel-perfect fidelity or clean, idiomatic classes matter more for this component.
  3. Read the generated classes on the right — hover any class to see the original property, value, and match confidence.
  4. Check the “Couldn’t convert” note under each block for anything that needs a manual look.
  5. Copy the classes for one rule, or convert several rules at once by pasting multiple { } blocks.

To go the other direction and see what a Tailwind class string compiles down to, use the companion Tailwind → CSS Converter — the two tools share the same lookup engine, so a round trip should land you back close to where you started.

FAQ

Will the converted classes look exactly like my original CSS? In Strict mode, yes — any value that doesn’t land exactly on Tailwind’s scale becomes an arbitrary-value class, which renders pixel-for-pixel identical to your original CSS. Loose mode intentionally rounds for cleaner output, and always tells you when it has.

What happens to CSS properties Tailwind can’t express? They’re listed in a separate “couldn’t convert” note under each result rather than silently dropped or converted into something incorrect — things like gradient backgrounds, font shorthand, and composite transform values fall in this category.

How does color matching work for colors that aren’t in Tailwind’s default palette? The tool finds the closest color in Tailwind’s default 22-color palette by RGB distance. In Strict mode a non-exact color always becomes an arbitrary value (bg-[#123456]) so nothing shifts visually; in Loose mode it snaps to the nearest named color/shade instead.

Does it support CSS variables (custom properties) as values? A var(--brand-color) value can’t be resolved to a specific hex, so it’s converted to an arbitrary value using the variable reference itself rather than a guessed color.

Can I paste an entire stylesheet at once? Yes — paste multiple .selector { ... } blocks and each one converts into its own labeled result card.