CSS to Tailwind converter
Paste old CSS and get a utility-first starting point for migration, cleanup, or a quick Tailwind rewrite.
Converted output will appear here.
Why use a CSS to Tailwind converter?
Migration accelerator
Move legacy CSS into a Tailwind workflow faster by turning known declarations into utility-class candidates instead of translating every line by hand.
Arbitrary value support
Preserve uncommon values with Tailwind's arbitrary syntax when a standard utility class does not exist.
Refactor with review in mind
Use the output as a migration draft, then simplify repeated values into tokens, components, variants, or reusable class patterns.
Commonly converted properties
Complex selectors such as :hover, ::before, or media queries may still need manual cleanup after conversion.
Frequently asked questions
Will the converter output finished production-ready classes?
No. Automatic conversion is best used as a starting point. Complex selectors, responsive rules, pseudo-elements, cascade behavior, and component semantics still need human review.
Can I paste raw declarations without a selector?
Yes. The tool wraps standalone declarations temporarily so the converter can still process them.
What should I do with repeated arbitrary values?
If a value repeats across the UI, consider turning it into a theme token, component class, or design-system primitive instead of leaving many one-off arbitrary utilities.
Can this convert media queries and hover states?
Some simple declarations can be translated, but responsive variants, hover states, pseudo-elements, and nested selectors often need manual cleanup after conversion.