CSS to Tailwind Converter

Paste a block of plain CSS and get back the closest Tailwind v3 utility classes for every declaration. The converter parses each rule, looks up properties like padding, font-size, color and border-radius against Tailwind's default theme, and prints a class list under a comment showing the original selector. Values that map cleanly become real utilities (1.5rem → p-6, #3b82f6 → bg-blue-500); anything off-scale becomes an arbitrary-value class so nothing is lost. It all runs locally in your browser.

Tailwind classes

How to use the CSS to Tailwind Converter

Paste your CSS into the input box — one or more rules in the standard selector { property: value; } form. Click Convert (or just type, it updates live) and each rule becomes a comment with the original selector followed by the space-joined list of Tailwind classes that reproduce it. Hit Example to load a sample card-and-tag stylesheet, and Copy to put the output on your clipboard.

Each declaration is matched to the nearest utility in Tailwind's default theme. Spacing values on the standard scale map directly — padding: 1rem becomes p-4, margin-top: 16px becomes mt-4 — and both px and rem are recognised. Common palette colors resolve to named utilities (color: #1f2937 → text-gray-800); font sizes, weights, text alignment, display, flexbox alignment, width/height and border-radius all have direct mappings. When a value falls outside the theme — an odd pixel padding, a non-palette hex, or a property with no utility — the converter emits a Tailwind arbitrary-value class such as p-[13px], bg-[#abc123], or [transform:rotate(3deg)], so the output stays complete and valid rather than silently dropping anything.

From CSS declarations to utility classes

Tailwind CSS replaces hand-written stylesheets with a fixed vocabulary of single-purpose utility classes, and the heart of that vocabulary is its design scale. The spacing scale is the clearest example: every step is a multiple of 0.25rem (4px at the default root font size), so 1 is 0.25rem, 4 is 1rem, 6 is 1.5rem, and so on through 8, 10, 12, 16, 20 and 24. That is why this converter can turn padding: 1.5rem into p-6 deterministically — it divides by the step and looks up the name. Colors work the same way against a fixed palette of named hues and numbered shades, font sizes against the text-xs through text-3xl ramp, and radii against rounded-sm through rounded-full.

The catch is that real CSS rarely lands exactly on the scale. A designer might specify 13px of padding, a brand color that is not one of Tailwind's 22 hues, or a property like transform or backdrop-filter that has many possible values. Mechanical CSS→utility mapping has hard limits here: it can only return a clean utility when the value matches a theme entry exactly. For everything else, Tailwind provides arbitrary-value syntax — square-bracket classes like p-[13px] or bg-[#1a2b3c] — and this tool falls back to those so the conversion is always lossless, even if the result is less idiomatic than utilities a human would pick.

Treat the output as a fast, accurate first draft rather than a finished component. It will not collapse four-sided shorthand into a single utility the way you might by hand, it assumes the default theme (a customised tailwind.config.js can shift the scale), and it does not infer responsive or state variants from media queries or pseudo-classes — those live in markup, not declarations. For the exact opposite direction, expanding a class list back into full CSS with variants, see the Tailwind to CSS converter.

Common use cases

  • Adopting Tailwind — convert an existing stylesheet rule-by-rule when migrating a component to utility classes.
  • Learning the scale — see which utility a given pixel or rem value maps to so you internalise the spacing and color systems.
  • Translating design specs — paste the CSS a designer handed off and get the equivalent classes to drop into JSX or HTML.
  • Refactoring inline styles — turn a chunk of CSS into utilities to clean up a component built with ad-hoc styling.
  • Quick reference — check the right class for a property without scrolling the Tailwind docs, including the arbitrary-value form for off-scale values.

Frequently asked questions

Which Tailwind version does it target?
Tailwind CSS v3 with the default theme — the standard 0.25rem spacing scale, the built-in color palette, the text-xs to text-3xl font sizes, font weights, border radii and the common layout utilities. If your project customises tailwind.config.js, some values may differ from your build.

What happens to values that aren't on the theme scale?
They become Tailwind arbitrary-value classes. An odd length like 13px becomes p-[13px], a non-palette color becomes bg-[#hexvalue], and a property with no utility (such as transform) becomes a bracketed [property:value] class. The conversion is lossless — nothing is dropped.

Does it handle colors and convert hex to palette names?
Yes. Common default-palette hex values map to named utilities — #fff to white, #000 to black, #3b82f6 to blue-500, #1f2937 to gray-800 and many more, for both color and background-color. Three-digit hex is expanded before lookup. Anything not in the palette falls back to an arbitrary value.

Why doesn't it generate responsive or hover variants?
Variants like md: and hover: describe when a utility applies and live in your markup, not in a CSS declaration. This tool maps the declarations inside a rule; it cannot infer breakpoints from media queries. To go the other way and expand variants into CSS, use the Tailwind to CSS converter.

Is my CSS sent to a server?
No. Parsing and mapping happen entirely in your browser using a built-in copy of the default theme. Nothing you paste is uploaded, logged or stored.