CSS to Tailwind Converter
Convert a block of CSS declarations into the equivalent Tailwind utility classes, with arbitrary value syntax where no default scale value matches and a clear list of anything that has no utility.
Last reviewed by the Radiatus Cloud team
Need this built for your product?
We design, build & host secure software & APIs.
Migrating a stylesheet one rule at a time
Adopting Tailwind in an existing project rarely happens all at once. A component gets rewritten, its CSS rule needs translating, and the translation is a lookup exercise: which utility corresponds to padding of 1.5rem, what is the class for a 700 font weight, does the default scale even contain this value. Doing that by hand across a few hundred rules is where migrations stall.
The scale is the hard part
Tailwind values come from a scale rather than being arbitrary. The spacing scale steps in quarter rem units, so 1.5rem is 6 and 0.375rem is 1.5, but 13px is not on the scale at all. When a value has no scale entry, the correct output is the arbitrary value syntax with square brackets rather than the nearest match, because silently rounding 13px to 12px changes the design. This converter uses the scale when the value is on it and square bracket syntax when it is not, and marks which is which.
What cannot be converted
Some CSS has no utility equivalent: complex multi value shorthands, vendor prefixed properties, animation keyframes and anything depending on a custom property defined elsewhere. Those are listed separately rather than approximated, because a wrong class is more expensive than a missing one. Pseudo selectors and media queries in the input are reported as the variant prefix they map to, so you know what to wrap the classes in.
Related tools
- JSON Formatter — Format and beautify JSON in your browser. Pinpoints syntax errors by line and column, flags unsafe integers, and never uploads your data to a server.
- JSON Validator — Validate JSON syntax with precise line and column errors, and check documents against a JSON Schema. Runs locally in your browser, nothing uploaded.
- Regex Tester — Test regular expressions against sample text with live match highlighting, capture groups and flag control. Runs entirely in your browser.
- HTML Minifier — Minify HTML by removing comments and redundant whitespace, without breaking inline elements or pre blocks. Runs entirely in your browser.
Frequently Asked Questions
Does it produce classes for the default Tailwind config?
Yes, the default theme scales for spacing, colours, font size, weight, radius, opacity and z index. If your project extends the theme, values that resolve to arbitrary syntax here may have a named class in your build.
Why does it emit square bracket syntax?
Because the value is not on the default scale. p-[13px] is exactly 13px, whereas rounding to p-3 would change the layout. Arbitrary values are a first class Tailwind feature, not a workaround.
Are colours converted?
Named CSS colours and hex values are matched against the default palette when they correspond exactly, and emitted as arbitrary values otherwise. Tailwind palette shades are specific hex values, so near matches are not substituted.
What happens to shorthand like "margin: 0 auto"?
It is expanded into the axis utilities, so that example becomes my-0 mx-auto. Four value shorthands become the individual side utilities.
Does it handle media queries and hover states?
A selector containing a pseudo class or a rule inside a media query is reported with the Tailwind variant prefix it maps to, such as hover: or md:, so you can apply it to the generated classes.
Privacy & Security
Everything runs in your browser; nothing is uploaded.
How to Use
Paste CSS declarations or a full rule and press Convert to get the Tailwind class list.
Disclaimer: This tool is provided "as is" without warranty of any kind. Results are for educational and utility purposes.
Related Tools
JSON Formatter
DeveloperFormat and beautify JSON in your browser. Pinpoints syntax errors by line and column, flags unsafe integers, and never uploads your data to a server.
JSON Validator
DeveloperValidate JSON syntax with precise line and column errors, and check documents against a JSON Schema. Runs locally in your browser, nothing uploaded.
Regex Tester
DeveloperTest regular expressions against sample text with live match highlighting, capture groups and flag control. Runs entirely in your browser.