Tailwind to CSS Converter
Both directions, with a verdict on every line — nothing is silently dropped
A bare list of declarations or a full rule — the selector and braces are stripped for you, because people paste what they have.
flex flex-col gap-4 p-6 rounded-xl bg-[#0f172a] text-sm shadow-[0_10px_30px_rgba(0,_0,_0,_0.25)]Line by line
Every input line, and exactly how it was handled.
display: flex;flexexactflex-direction: column;flex-colexactgap: 16px;gap-4exactpadding: 24px;p-6exactborder-radius: 12px;rounded-xlexactbackground-color: #0f172a;bg-[#0f172a]arbitrary valueA literal colour. If it is in your theme, the named utility is better — this is always correct but never semantic.
font-size: 0.875rem;text-smexactbox-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);shadow-[0_10px_30px_rgba(0,_0,_0,_0.25)]arbitrary valueTailwind’s named shadows are a different set of values — this preserves yours exactly rather than picking the closest.
What this is not
- Not your config. The scales here are Tailwind’s defaults. If your theme has a custom spacing ramp or named colours, a value that is exact in your project may come back as an arbitrary value here — correct, just not the utility you would have written.
- Not a compiler. Variants, plugins, `@apply` and the theme function need a build. What this covers is the common utility surface, which is most of what a component actually uses.
- Never lossy in silence. Anything without a utility becomes an arbitrary property —
[mask-image:…]— which is a valid class and exact. The only lines that come back empty are the ones that genuinely are not declarations, and they are listed above with the reason.
Now use it on something
Every effect, block, page and template in the catalog is styled against tokens shaped exactly like these — so they take your values rather than fighting them.
npx shadcn@latest add https://hoverlab.dev/r/hoverlab.json
Keep this snippet. This browser remembers what you last had open. A free account remembers the ones you name, on every machine you use.
- Color ConverterPaste a color in any CSS format — hex, rgb(), hsl(), or oklch() — and get all four back, one copy button each. OKLCH math is done properly through linear-light OKLab, and out-of-gamut colors are clamped to sRGB and flagged instead of silently shifted.
- HTML to JSXPaste markup and a stylesheet, take away a component — React, Vue, Svelte, styled-components or Tailwind. The same engine the catalog exports through, pointed at your own code, and it says what changed on the way through rather than leaving you to find out.
- Palette GeneratorBuild a 5-color palette from a base color. Supports analogous, complementary, triadic, split-complementary, tetradic, monochromatic, and shades & tints schemes. Export as CSS variables, Tailwind config, or JSON — or send the base straight to the Token Generator.