Translate CSS declarations into Tailwind utilities — scale values map to core classes, off-scale values become arbitrary values, near-miss colors map to the closest palette color. Honestly scoped: selectors, media queries and multi-value shorthands are reported, not guessed.
Show calculation steps
Processed privately in your browser — nothing you paste is uploaded, logged or stored.
What this converter is — and is not
It maps CSS declarations to Tailwind utilities, and it is honest about the boundary. Scale values hit core classes (padding: 1.5rem → p-6); off-scale lengths become arbitrary values (width: 347px → w-[347px]); colors near a palette color map to it with a note, distant ones stay exact. What it will NOT do is guess: selectors, @media blocks, pseudo-classes and multi-value shorthands are detected and reported for manual handling — a wrong guess in a converter is worse than no answer.
Worked example
display: flex; → flex
align-items: center; → items-center
padding: 1.5rem; → p-6
background-color: #f8fafc; → bg-slate-50
width: 347px; → w-[347px]Handling the reported blocks
- :hover declarations → convert them, then prefix the results with hover: yourself.
- @media (min-width: 768px) → prefix with md: (or your custom breakpoint).
- margin: 10px 20px → split into my-[10px] mx-[20px] by hand.
When to use it
- Migrating components from plain CSS or styled-components.
- Translating design-tool CSS export into utilities.
- Learning the utility vocabulary by feeding it CSS you already understand.
After converting
- Run the result through the Class Sorter for conventional order, and the Validator if you edited by hand.
How to use the CSS to Tailwind Converter
- Paste CSS declarations — a full rule with selector works; the block contents are extracted.
- Click "Convert to Tailwind".
- Copy the class string; review the nearest-color notes and the kept-as-CSS list.
Frequently asked questions
What converts and what honestly does not?
Single-value declarations for common properties convert — display, spacing, sizing, colors, typography, radius, shadows, flexbox. Selectors, @media blocks, pseudo-classes and multi-value shorthands (margin: 10px 20px) are reported for manual handling, never guessed.
What happens to values that are not on Tailwind's scale?
They become arbitrary values — padding: 13px → p-[13px] — exact and idiomatic. Colors close to a palette color map to it with a note; distant colors stay exact as bg-[#hex].
How do I convert hover and responsive styles?
Convert the declarations, then add the prefix yourself: the classes from a :hover block get hover:, an @media (min-width:768px) block gets md:. The converter flags these blocks so none get lost.
