CSS to Tailwind Converter
Paste CSS, get utilities. Or the other way round.
flex flex-col gap-4 p-6 rounded-xl bg-[#ffffff] text-sm [box-shadow:0_1px_3px_rgb(0_0_0_/_0.1)]8 declarations · 2 as arbitrary values
display: flex;→flexflex-direction: column;→flex-colgap: 16px;→gap-4padding: 24px;→p-6border-radius: 12px;→rounded-xlbackground-color: #ffffff;→bg-[#ffffff]arbitraryfont-size: 14px;→text-smbox-shadow: 0 1px 3px rgb(0 0 0 / 0.1);→[box-shadow:0_1px_3px_rgb(0_0_0_/_0.1)]arbitrary
An arbitrary value is still valid Tailwind — it just has no named utility, usually because the value is off the default scale or is a raw colour. Nothing here is guessed.
A translation you can check
Most converters hand you a class string and hope you trust it. This one shows every declaration beside what it became, and marks the ones that fell back to an arbitrary value — so you can see at a glance which parts of your CSS actually fit Tailwind's scale and which are fighting it.
How to use it
-
Pick a direction
CSS to Tailwind by default. Use the swap control to convert Tailwind classes back into CSS declarations.
-
Paste your code
A full rule with a selector, or bare declarations. Both work; comments are ignored.
-
Check the per-declaration list
Every conversion is listed with its result, and anything that fell back to an arbitrary value is marked. Nothing is guessed.
-
Copy the result
Take the class string, or the reconstructed CSS rule if you converted the other way.
Arbitrary values are not failures
A conversion that produces p-[13px] instead of p-3 is telling you
something useful: that value is off the design scale. Sometimes that is intentional and the
arbitrary value is the right answer. More often it is a sign the original CSS accumulated
one-off numbers, and the honest fix is to snap it to the scale rather than to carry the
oddity across.
What it deliberately will not do
It will not guess colour utilities. bg-slate-800 resolves through your Tailwind
config, and a converter that invents a hex value for it is worse than one that says it does
not know. Going the other way, raw colours become arbitrary values rather than a guess at
which palette entry you meant.
Coming from a grid layout
If you are converting a grid, the CSS grid generator already emits Tailwind directly — including responsive variants and subgrid utilities — which is a shorter path than writing CSS and translating it.
Frequently asked questions
What is a Tailwind arbitrary value?
p-[13px] that lets you use any CSS value with no named utility. It is fully supported, not a workaround. This converter falls back to arbitrary values whenever your value is off Tailwind's scale, so the output is always correct.Why does the Tailwind output contain underscores?
grid-cols-[1fr_240px] means grid-template-columns: 1fr 240px. Tailwind converts them back when generating the CSS.Why are my colour classes not recognised when converting back to CSS?
bg-slate-800 get their value from your Tailwind config, not from the class name. Without the config there is no honest way to know the hex value, so they are reported as unrecognised rather than guessed.How does the Tailwind spacing scale map to pixels?
1, 16px is 4 and 24px is 6. Values landing exactly on a step get the named utility; anything in between becomes an arbitrary value.Can it convert grid and flexbox properties?
grid-template-columns: repeat(3, 1fr) becomes grid-cols-3, custom track lists become grid-cols-[…], and the full set of flex and alignment keywords maps to their utilities.