Paste CSS, get Tailwind classes

A stylesheet full of display: flex and margin-top: 1rem does not have to become a hand-written class list. The CSS to Tailwind converter maps declarations (and HTML inline styles) onto Tailwind utilities in the browser.

What converts well

Layout, spacing, color, typography, borders, and common flex or grid rules map cleanly. Arbitrary values fill in the rest when a number is not on the default scale. Unknown properties stay listed so you can decide what to keep as custom CSS.

display: flex;
margin-top: 1rem;
color: #fff;
background: #0f172a;

That block is the kind of input the tool expects — paste a rule body or a full declaration list, then copy the class string into markup.

The other direction

Already have a class list, HTML, or @apply? The Tailwind to CSS converter compiles Tailwind v4 in the tab, including variants such as hover: and md:. Drop a .css or .html file on either tool. Files stay on this device.