Tailwind Class Converter
Paste declarations or Tailwind classes, choose the conversion direction, and review every mapped and unmatched item.
Paste declarations or classes, then convert.
Mapped
Unmatched
Built-in Tailwind v4 subset only. Custom project themes and Tailwind v3 differences are not read.
A QUICK WALKTHROUGH
How to use this tool
- Paste CSS declarations or Tailwind classes.
- Choose the direction and optional arbitrary-value or px-to-rem behavior.
- Review each mapping and any unmatched items before copying the result.
Bounded Tailwind v4 map
Common spacing, color, typography, display, flex, grid, border, radius, shadow, and position declarations are mapped locally. Custom project themes and Tailwind v3 differences are not read.
No silent loss
Every declaration or class is shown as mapped or unmatched. Unsupported values can optionally be emitted as arbitrary utilities such as p-[13px].
Local processing
Parsing and conversion happen in your browser. No stylesheet, project configuration, or pasted content is uploaded.
GOOD TO KNOW
Common questions
Does this load my tailwind.config?
No. Custom project themes and Tailwind v3 differences are not read; the map is a built-in Tailwind v4 subset.
Are unsupported declarations discarded?
No. They remain in the unmatched list, and arbitrary values can be enabled where the property is supported.
Can it convert a full stylesheet?
It accepts declaration lines and class tokens, not selectors, nesting, or a complete stylesheet.