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.
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.
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.