Convert CSS to TailwindCSS classes
Convert CSS declarations into TailwindCSS utility classes, with arbitrary-value fallback.
Unrecognized properties become Tailwind arbitrary values ([property:value]). Double-check color and spacing mappings against your config.
🔒 100% client-side — no data sent
Paste CSS declarations and get the matching TailwindCSS utility classes. Recognized properties map to standard classes, the rest to arbitrary values. 100% local conversion.
What is it for?
- ▸ Migrate existing CSS to Tailwind
- ▸ Quickly translate a CSS mockup into classes
- ▸ Learn the Tailwind equivalents of a property
- ▸ Prototype without leaving your editor
FAQ
Are all properties supported?
Common properties get a dedicated class; the rest are converted to a Tailwind arbitrary value like [property:value].
How are margins and spacing handled?
Values that are multiples of 4px (or 0.25rem) use the Tailwind scale (p-4, mt-2…); otherwise an arbitrary value is produced.
Are colors mapped to Tailwind colors?
No, colors are kept as-is in an arbitrary value (bg-[#hex]) since they depend on your theme configuration.
Can I paste a full CSS rule?
Yes, the selector and braces are ignored; only the declarations are converted.