CSS to Tailwind Converter
Paste plain CSS declarations and get Tailwind CSS v3 utility classes back. Every line is shown in a mapping table with the original declaration next to its Tailwind class, so you can verify the conversion line by line.
Your CSS
Converted utility classes
Copied to clipboard.
Line by line mapping
| Original declaration | Tailwind class | Status |
|---|
Targets Tailwind CSS v3 utilities. Values that do not match a standard Tailwind scale are marked honestly as having no direct equivalent.
How to use
- Paste one or more CSS declarations into the box, for example
margin: 16px; padding: 8px; - Press Convert to Tailwind to get the utility classes.
- Check the mapping table: green rows converted cleanly, amber rows have no direct equivalent.
- Press Copy to copy the full class string for your HTML.
Frequently asked questions
It parses plain CSS declarations and converts them into Tailwind CSS v3 utility classes, showing the original declaration next to its Tailwind class in a mapping table.
The mapping table marks it honestly as having no direct equivalent instead of guessing, so you always know exactly what was converted and what was not.
Margin and padding (including shorthand), display, flex layout, text size, weight, color and alignment, backgrounds, borders, radius, width, height, position, spacing offsets, opacity and shadows.
Yes, it is completely free, needs no signup, and all conversion happens in your browser so your CSS never leaves your device.