Softonic

CSS to Tailwind

Step 1 / 2
Convert to Tailwind

Migrating a legacy stylesheet to Tailwind one rule at a time is tedious. This converter takes a block of plain CSS, with or without selectors and curly braces, and rewrites each declaration as a Tailwind utility. Recognized pairs map to named utilities like flex, items-center or rounded-lg, and anything else falls back to the Tailwind arbitrary value syntax [property:value] so nothing is silently dropped.

How the converter processes your CSS

  1. 1

    Paste the CSS

    Drop in a full rule like `.card { padding: 16px; border-radius: 8px; }` or just the declarations inside the braces.

  2. 2

    Parser strips comments

    Block comments `/* ... */` are removed before the declarations are split on semicolons.

  3. 3

    Each declaration is mapped

    Common properties map to real Tailwind utilities (spacing, radius, font-size, flex, display, text-align); unknowns fall back to `[prop:value]`.

  4. 4

    Copy and apply

    Paste the class list into the `class` attribute of the matching HTML element.

What gets mapped to named utilities

Tailwind’s default theme cannot cover every possible CSS value, so the converter prioritises the ones where a named utility exists and uses arbitrary values everywhere else.

Direct mappings

CSS declaration Tailwind utility
display: flex flex
display: grid grid
display: none hidden
justify-content: center justify-center
align-items: center items-center
text-align: center text-center
font-weight: bold font-bold
cursor: pointer cursor-pointer
overflow: hidden overflow-hidden

Scale-aware mappings

Padding, margin, width, height, min/max dimensions all divide a px value by 4 to produce a Tailwind spacing step, padding: 16px becomes p-4, width: 32px becomes w-8. Values that do not land on a clean step fall back to arbitrary values on the matching utility, for example width: 37px becomes w-[37px].

border-radius is mapped to the closest named utility (rounded-sm, rounded-md, rounded-lg, rounded-xl, rounded-2xl). Sizes above 16px become rounded-full, which is handy for pills but wrong for oddly large radii, inspect the output before shipping.

font-size buckets into text-xs through text-3xl by pixel thresholds.

Caveats

  • Pseudo-classes, media queries and selectors are not translated; only the declarations inside the braces are. You still need to add variants like hover: or md: yourself.
  • Colors land in arbitrary values such as text-[#1f2937] because the converter does not know your Tailwind theme palette. Swap in text-gray-800 or a custom token by hand.
  • Truly unknown properties with no Tailwind utility fall back to the [property:value] form (e.g. border, background, transition shorthands), verify them before shipping.

Frequently Asked Questions

The output uses utility names that are stable across Tailwind v3 and v4. Arbitrary values in square brackets are also valid in both. You may want to re-tokenize colors into your v4 @theme palette after pasting.

The converter has no visibility into your tailwind.config.js color scale, so it emits the color as an arbitrary value on the matching utility (text-[#1f2937]). Map it to the closest palette token manually, for example text-gray-800 or a brand token you have defined.

Yes, paste multiple rules. The tool will emit one class list per selector, separated by a /* selector */ comment so you can line them up with the matching HTML.

The CSS is sent to our server so the converter can turn it into Tailwind classes. It is not stored and it does not appear in the page link.

Related Tools

ASCII Table Reference

Full ASCII table from 0 to 127 with decimal, hex, octal, binary, standard names and HTML numeric-reference notation, including NUL, LF and DEL.

Color Palette Generator

Generate monochromatic, analogous, complementary, triadic or tetradic color palettes from a base HEX color and export copy-ready CSS variables.

HEX Color Picker

Pick or enter a HEX colour and get RGB, HSL, approximate CMYK, relative luminance and contrast ratios against white and black.

HTML Character Reference

Searchable list of HTML entities, their named and numeric codes, and a one-click copy for special characters and symbols.

JSON Formatter

Paste JSON to pretty-print with 2 or 4 spaces, minify it to compact output, or run a quick syntax check before copying the result.

Phone Validator

Validate phone numbers by country, detect the region and type, and normalize valid numbers to E.164, international, national and RFC 3966 formats.

Tool available in other languages