css-to-tailwind
What css-to-tailwind actually does
Tailwind's scale is opinionated and CSS is not, so most of the work in this conversion is deciding what to do with a value that has no utility. Two answers are possible: leave it out, or write it as an arbitrary value in square brackets. This tool writes the arbitrary value, because a class list missing a rule is a silent regression and a bracket is visible. The output is grouped by selector, with the selector kept as a comment above its classes, so the mapping can be checked declaration by declaration rather than accepted as a block. What this page does not claim is that the class list is a drop-in replacement. A selector with a combinator, a pseudo-element or a state has no single class list, and a media query becomes a responsive prefix only when its breakpoint matches the scale. Those cases are visible in the output rather than dissolved into it. One correctness note worth stating: until 2026-08-22 this converter refused valid CSS. A declaration block whose last declaration carried no semicolon produced the message that no CSS rules were found, and on a multi-rule sheet the unterminated text leaked into the next selector. Both are fixed, and a stylesheet with no trailing semicolons now converts identically to the same stylesheet with them.
How to use it
- Paste the CSS, or drop a .css file on the left pane. Nothing leaves this tab.
- Press Convert, or cmd+enter.
- Read the classes on the right, grouped under the selector each came from as a comment.
- Anything in square brackets had no utility on the default scale and was written as an arbitrary value.
- Use Diff to line up the declarations you gave against the classes you got, and Checks for the line ratio.
- Edit the class list in place, then copy it. Restore brings back the conversion.
Useful for
- Move a component from a hand-written stylesheet into a Tailwind project one selector at a time.
- Find out which of your values are off the default scale, by reading which ones came back in brackets.
- Translate a snippet from documentation written in plain CSS into the class list your project expects.
- Audit an existing class list by converting the CSS you meant to write and comparing the two.
Limits worth knowing
- The mapping targets the default Tailwind scale. A custom theme will name some of the bracketed values, and this page cannot know that.
- A media query does not become a responsive prefix; it is reported and left for you to place.
- Keyframes are reported as needing a config entry rather than converted.
- A selector with a combinator, a pseudo-element or a state is emitted as its comment and its classes; deciding where the classes go is yours.
- Shorthand is mapped as written. A shorthand that a utility splits differently may need a second look.
- There is no independent checker for a Tailwind class list, and the Checks tab says so rather than showing a green tick it has not earned.
Questions people ask
Why are some classes in square brackets?
The value has no utility on the default scale, so it is written as an arbitrary value. Leaving it out would silently change the design.
Will this work with my custom theme?
The conversion does not read your config, so a value your theme names will still come back bracketed. Substituting your own token is a search and replace.
What happens to my media queries?
They are reported rather than converted. Mapping a pixel breakpoint to a prefix depends on your config.
Does the Checks tab validate the classes?
No, and it says so. There is no checker here that can tell a real utility from a plausible one, so it reports the line ratio and nothing more.