Design & CSS

CSS → Tailwind Converter

Paste a CSS rule (or whole stylesheet) and get Tailwind utility classes. Recognized colors map to Tailwind's palette; standard spacings map to the spacing scale. JIT mode emits arbitrary `[value]` when there's no named match.

Direction

Rules

Classes

Unconverted

Sample stylesheets

Load a familiar component to explore the converter quickly.

CSS input

Paste CSS rules and watch the Tailwind equivalents appear on the right.

Tailwind output

Switch between per-rule mapping, a flat class list, or a ready-to-paste HTML snippet.

Selector.btn-primary
Classes
inline-flexitems-centerjustify-centerpx-4py-2bg-blue-500text-whitefont-semiboldrounded-lgcursor-pointer

Conversion settings

Tune how aggressive the converter is.

JIT mode

Allow arbitrary values like p-[13px] when no Tailwind preset matches.

Strict palette

Reject colors that aren't part of Tailwind's named palette.

Variant strategy