Online Tool Store
Tailwind Class Converter
Converts CSS declarations to Tailwind utility classes and back, using scale values read from Tailwind v4 itself. Expands padding and margin shorthand, falls back to arbitrary values off the scale, and lists anything it could not convert instead of discarding it.
🔒 This tool runs entirely in your browser. Your files are never uploaded to a server.
Line by line
| Input | Result |
|---|
Values come from the Tailwind v4 default theme, read from the installed version rather than typed from memory. If your project customises its theme, the class names are right but the numbers may not be — and v3 differs from v4 on several scales, most noticeably border radius. Nothing is uploaded.
How to use it
- Paste CSS declarations — a whole rule with braces is fine, they get stripped.
- Read the line-by-line table to see exactly what each declaration became.
- Check the unmatched list; those are left out of the output on purpose.
- Switch direction to go from classes back to CSS.
The values come from the installed version
Every number in this tool was read out of Tailwind 4.3.3's own theme file rather than remembered, because the scales are exactly the sort of thing that is easy to get slightly wrong — and v4 moved several of them.
The border radius scale is the one that will bite you. It was renamed in v4, so the same class name means a different size:
v3 v4
rounded-xs — 0.125rem
rounded-sm 0.125rem 0.25rem ← doubled
rounded 0.25rem 0.25rem
So a v3 codebase that used rounded-sm for a barely-there corner gets
twice the curve after an upgrade. This tool emits v4 names for v4 values; if you are targeting v3, subtract one step from the
radius scale.
Spacing is arithmetic, not a lookup
In v4 the entire spacing scale comes from a single token. --spacing is
0.25rem and every utility multiplies it, so the useful range is not a fixed list of steps:
padding: 1rem → p-4
padding: 2rem → p-8
margin-top: 0.125rem → mt-0.5
margin-top: 13px → mt-[13px] off the grid
Shorthand is expanded correctly too: padding: 1rem 1.5rem becomes
py-4 px-6, and a four-value shorthand becomes four separate side
utilities in the right clockwise order.
Colours are the honest gap
A hex value cannot be turned into a class name without knowing your palette. The same
#1e3a8a could be a default palette shade, a project token, or
nothing named at all — and this tool has no access to your configuration.
So it emits an arbitrary value, which is always correct even when it is not idiomatic, and labels it as the literal value so you
know to look for a named alternative. Only the genuinely universal keywords —
white, black,
transparent and
currentColor — get named classes.
Nothing is dropped silently
This is the design decision that matters most. When a declaration has no utility equivalent, it is listed as unmatched and excluded from the output rather than quietly discarded. An incomplete answer you can see is far better than a complete-looking answer that lost a declaration — because the second kind of mistake only surfaces when something renders wrong, long after you have moved on.
The line-by-line table shows every input alongside its result, with unmatched rows highlighted, so the gaps are visible at a glance rather than needing to be inferred by comparing lengths.
What it deliberately will not attempt
Variants are out of scope, and not for lack of effort — plain CSS declarations simply do not carry the information. A hover style
lives in its own rule with its own selector, so a list of declarations cannot tell you whether they belong under
hover:, md:
or nothing. Convert the declarations and add the prefixes yourself.
Likewise, a customised theme changes the numbers without changing the class names, so if your project redefines its spacing or palette the names here will still be right and the values may not. And this is a lookup table with arithmetic rather than a compiler — for anything unusual, Tailwind's own documentation is the authority.
FAQ
Which Tailwind version are these values from?
Version 4, and the numbers were read out of the installed package rather than recalled from memory. That matters because v4 changed several scales. The border radius scale was renamed: what v3 called rounded-sm (0.125rem) is now rounded-xs, and v4's rounded-sm is 0.25rem — which was v3's bare rounded. Convert v3 markup with v4 values and a corner silently doubles.
Why does my colour come out as an arbitrary value?
Because naming it correctly requires your project's palette, which this tool cannot see. #1e3a8a might be blue-900 in a default install, a brand token in yours, or nothing at all. Emitting bg-[#1e3a8a] is the only answer that is definitely right — it produces exactly the colour you asked for. Swap it for the named class once you know what your theme calls it.
What happens to a declaration it does not recognise?
It is listed as unmatched and left out of the output, never silently dropped. That distinction matters: a converter that quietly discards what it does not understand hands you markup that looks finished and has lost styling you will not notice until something renders wrong. The line-by-line table shows every input and what became of it.
Does it handle hover states and responsive prefixes?
No. Variants like hover:, focus:, md: and dark: are a layer above the utilities themselves, and plain CSS declarations carry no information about which variant they belong to — a hover style lives in a separate rule with its own selector. Convert the declarations, then add the variant prefixes yourself. Going the other way, a class with a prefix is reported as unmatched rather than guessed at.
Why is spacing able to produce any number?
Because v4 derives the whole spacing scale from one value. The --spacing token is 0.25rem and p-4 is calculated as that multiplied by 4, so any integer step works rather than only the values in a fixed list. That is why 2rem cleanly becomes p-8 and 0.125rem becomes p-0.5, while something off the grid like 13px falls back to an arbitrary value.
Is this a substitute for reading the docs?
For the common properties it will save you looking things up, and for anything unusual it will tell you honestly that it does not know. It covers spacing, sizing, typography, borders, radius, shadow, flex and grid basics, opacity, position and overflow. It is a lookup table with arithmetic, not a compiler — Tailwind itself is the authority.
How we compare
| Feature | Online Tool Store | Other class converters | Reading the Tailwind docs |
|---|---|---|---|
| Values verified against the installed version | ✓ | Often stale | ✓ |
| Lists what it could not convert | ✓ | ✗ | — |
| Both directions | ✓ | Usually one | ✓ |
| Expands padding and margin shorthand | ✓ | Sometimes | — |
| Nothing uploaded | ✓ | ✗ | ✓ |
| Reads your project's theme configuration | ✗ | ✗ | — |
| Variants, arbitrary properties, plugins | ✗ | ✗ | ✓ |
Best used when migrating a stylesheet to utilities, or when you have inherited utility markup and need to know what it actually does. It will not read your theme config and it does not handle variants, so treat the output as a strong first pass — the unmatched list tells you precisely where to look.