CSS to Tailwind Converter
Convert plain CSS declarations or rules into Tailwind CSS utility classes — spacing, flexbox, grid, typography, colors, borders and more, with arbitrary values where needed.
How to use
- 1Paste CSS — a whole rule (.btn { … }) or just declarations.
- 2Copy the Tailwind classes for each selector.
How it's calculated
Values on Tailwind's default scale map to named classes (16px → 4, 1.5rem → 6); anything else becomes an arbitrary value like w-[37px] or [prop:value].
Frequently asked questions
Does it handle hover and media queries?
Not automatically — add variants yourself, e.g. hover:bg-blue-600 or md:flex, around the converted classes.
Why do I see brackets like text-[#1e40af]?
Values that aren't on Tailwind's default scale become arbitrary values. Swap in your theme colors (e.g. text-blue-800) if they match.
Which Tailwind version is this for?
Class names match Tailwind v3 and v4 defaults (spacing unit 0.25rem).