Tailwind ↔ CSS converter

Paste Tailwind utility classes to see the CSS they produce, or paste CSS to get the nearest Tailwind classes. It covers the most common utilities and updates as you type — nothing is uploaded.

Tailwind classes

Equivalent CSS

Paste some Tailwind classes above to see the CSS.

Covers the most common utilities, not the whole framework. Variants (hover:, md:, dark:), arbitrary values ([…]) and rare utilities are passed through untouched.

Everything runs in your browser. No upload, no sign-up.

How it works

STEP 1

Pick a direction

Switch between Tailwind → CSS and CSS → Tailwind. The input and the example update to match the way you are converting.

STEP 2

Paste your code

Drop in a list of Tailwind classes, or a block of plain CSS declarations. Conversion happens live in your browser as you type — nothing leaves your device.

STEP 3

Copy the result

Copy the generated CSS or the suggested Tailwind classes with one click and paste them straight into your project.