CSS to Tailwind Converter
Paste CSS, get Tailwind v4 classes — with a side-by-side visual proof they render identically.
A free online CSS to Tailwind converter that generates real Tailwind v4 utility classes from your CSS — verified against the actual installed compiler, not a stale snapshot. See a side-by-side preview proving the output matches your original styles. Runs entirely in your browser.
Accepts full CSS rules or bare declarations from DevTools. Supports @media and :hover/:focus variants.
Leftover CSS (no Tailwind equivalent)
Visual proof
Original CSS (left) vs reconstructed from generated classes (right). Both should render identically.
Original
From Tailwind classes
What this tool actually checks
Most CSS-to-Tailwind converters ship a static table of Tailwind values that may not match your version — especially with Tailwind v4's shift to OKLCH colors and a formula-based spacing scale. This tool takes a different approach: the utility index is generated at build time from node_modules/tailwindcss/theme.css, the same source of truth the real compiler uses.
When you paste CSS, the converter matches each declaration against that index, emits the closest Tailwind utility (or an arbitrary-value class like w-[13px] when no scale step fits), and then reconstructs the CSS those classes would produce. The side-by-side preview shows your original styles next to the reconstructed output — so you can see the equivalence, not just trust the class string.
What doesn't convert cleanly
Some CSS properties don't map to Tailwind utilities at all — transforms, filters, animations, and complex grid-template-* declarations are shown in the Leftover CSS panel rather than silently dropped. For values Tailwind can express but that don't match a named scale step, the tool uses Tailwind's bracket syntax (bg-[#1a2b3c], mt-[13px]) instead of guessing the wrong nearest value.
Tailwind v3 vs v4 differences that affect conversion
Two changes matter most when converting CSS to Tailwind classes:
- Spacing — v4 uses a single multiplier (
--spacing: 0.25rem) so utilities likep-4mean1rem, computed as 4 × 0.25rem. v3 used a static list of pixel values that don't always match. - Colors — v4 defaults are OKLCH, not the sRGB hex values from v3. A hex color pasted as CSS is nearest-matched in OKLCH space against the real v4 palette, which is more perceptually accurate than naive RGB distance.
Working with Tailwind colors elsewhere? See the Tailwind Colors reference, the OKLCH Converter for format conversion, the Color Shades Generator for palette scales, or the Shadcn Theme Generator for full theme tokens.
