Tools
CSS to Tailwind Converter
Paste CSS declarations (a full rule or just the lines inside the braces) and get matching
Tailwind utility classes as you type. Spacing snaps to the 4px scale; anything off-scale becomes an
arbitrary value like p-[18px].
About this converter
It walks each declaration and maps the common ones (display, flexbox alignment, padding and
margin, width and height, border-radius, colors, font-size, gap,
opacity, position and overflow) to their Tailwind equivalents.
Pixel spacing rounds to the default scale where 4px equals one step, so 16px
becomes p-4. Values that don't land on the scale fall back to arbitrary syntax,
p-[18px], which Tailwind reads literally.
This is a best-effort tool for everyday properties, not a full compiler. It skips shorthand expansion for
things like border or transition, and anything it can't place is shown as
[unmapped: prop:value] so nothing disappears silently. Check the arbitrary values against your
config. If you've customized your spacing or color scale, a hand-written class may read cleaner than the
raw pixel value here.