CSS to Tailwind
NewConvert raw CSS declarations into equivalent Tailwind CSS utility classes.
CSS to Tailwind
Convert CSS declarations to Tailwind classes
Paste a CSS rule body (the declarations inside { }, or a full rule) and get the closest matching Tailwind utility classes. Values that don't map to a default Tailwind scale fall back to arbitrary-value syntax like w-[123px].
Frequently Asked Questions
How does a pixel value like padding: 18px get converted?
It first checks against Tailwind's default 4px-based spacing scale (e.g. 16px → p-4). If the value doesn't land on that scale, it falls back to an arbitrary-value class like p-[18px] so the output is still exact.
Why did some of my CSS properties get left out of the output?
Only a curated set of common properties (layout, spacing, color, typography, borders) is mapped. Anything outside that list — complex gradients, multi-value transitions, unusual shorthand — is listed in the "not auto-mapped" notice below the output instead of being guessed at incorrectly.
Does it handle hex colors and named colors the same way?
Hex and rgb()/rgba() values are converted to Tailwind's arbitrary-value syntax, like bg-[#1e293b]. A handful of common CSS color keywords (white, black, red, etc.) map to their closest default Tailwind color instead.
Can I paste a full CSS rule with the selector included?
Yes — pasting .card { ... } or a bare declaration list both work. The tool strips everything up to the first { and the trailing } before parsing declarations.
Is this analyzing my actual rendered styles, or just the text I paste?
Just the text you paste. It's a static, rule-based converter — it doesn't load a browser or compute cascaded/inherited styles, so shorthand properties are parsed literally as written.