CSS to Tailwind Converter
Convert a block of CSS into Tailwind classes, mapping the spacing scale and falling back to arbitrary values.
Turn a block of CSS into Tailwind classes, with arbitrary values for anything off the default scale.
Tailwind
flex items-center justify-between py-4 px-6 gap-3 rounded-xl bg-[#6d5efc] text-white text-sm font-semibold
11 classes, 1 using an arbitrary value
A class in square brackets is an arbitrary value. It works, but it means the value is off Tailwind's scale. If you see many of them, the design is probably worth aligning to the scale instead.
flex items-center justify-between py-4 px-6 gap-3 rounded-xl bg-[#6d5efc] text-white text-sm font-semiboldAbout the css to tailwind converter
Moving a component to Tailwind means translating every declaration by hand and remembering that 16px is 4, 24px is 6, and a radius of 12px is rounded-xl. It is mechanical work, and mechanical work is where typos come from.
This maps against Tailwind's default scale and falls back to an arbitrary value in square brackets for anything off it. Counting how many brackets you end up with is itself useful: a design that produces a lot of them is not really on the scale, and that is worth fixing at the design level rather than papering over in markup.
The conversion doubles as a free audit. Clean CSS that lands almost entirely on named utilities is a design that was already on a system; a block that throws off a dozen arbitrary values is telling you the original was full of one-off numbers, which is worth knowing before you commit it to markup.
How to use it
- 1Paste your CSS, either a bare block or a whole rule with its selector.
- 2Read the converted classes.
- 3Check anything left in the not converted list.
- 4Copy the classes or the ready made HTML.
Worth knowing
- The spacing scale is the part worth internalising: 1 is 4px and each step adds 4, so 4 is 16px and 8 is 32px. Once that mapping is automatic, most conversions stop needing a tool at all.
- Colours are the usual holdout. A hex that is not in the palette becomes an arbitrary value, which is a hint to add it to your theme rather than scatter the raw hex across your markup.
- The converter reads declarations, not the cascade. It cannot know a value was meant to be overridden elsewhere, so review anything where specificity or inheritance was doing real work.
Questions
What does a class in square brackets mean?
It is an arbitrary value, Tailwind's escape hatch for something off the default scale. It works, but a lot of them is a sign the design is not aligned to the scale.
Why was a declaration not converted?
Either it has no utility equivalent, or it is a shorthand with a form the converter does not read. It is listed rather than dropped so you can move it across yourself.
Does it handle padding shorthand?
Yes. One value becomes p-*, two values become py-* and px-*, and four values become the four sides individually.
Which Tailwind version does this target?
The default scale shared by v3 and v4. Arbitrary value syntax in square brackets works the same in both.
Will the classes exactly reproduce my CSS?
For anything on the scale, yes. Arbitrary values reproduce the exact number too. The gap is only properties with no utility equivalent, which are listed separately so nothing is silently lost.