Inline Style to Tailwind Classes

Paste style="…" or plain declarations and copy the Tailwind class string — or copy it as className.

Declarations

Tailwind v4

Classes appear here

Converted in your browser.v4 colours use OKLCH — palette names match v3 visually.

Loading Tool...

Help shape Inline Style to Tailwind Classes

The bug you just noticed will fade in 3 minutes. The feature idea will vanish after your next tab switch. Crazy peps don't suffer silently.

0/1000

Frequently Asked Questions

Yes — style="…" is stripped automatically; plain declarations work too.

Exact palette colours map to names like blue-600; others become bg-[#123456], or snap to the nearest colour if you enable it.

Yes — as p-4! in v4 or !p-4 in v3.

Yes, free with no signup; everything runs in your browser.