CSS → Tailwind Utilities
Private by design — runs entirely in your browser
Paste CSS declarations on the left and copy the Tailwind utility classes on the right. The converter maps the standard spacing, color, typography and layout scales to their native utilities, and falls back to bracket notation for any value Tailwind does not know natively.
Mappable properties
The converter recognises the everyday CSS surface: padding and margin spacing, font sizes and weights, color (text and bg), display, flex direction and alignment, border radius, width and height, position and gap. Each maps to its canonical Tailwind shorthand — p-4, text-lg, justify-between — so the output reads exactly like hand-written Tailwind.
Why arbitrary notation matters
Real codebases use values Tailwind has no built-in for: a 13-pixel custom font size, a brand colour with a specific hex, a 1.7rem gap. When the converter sees one of these it emits the Tailwind arbitrary form, like text-[13px] or bg-[#3b82f6]. The resulting class is still valid Tailwind, still benefits from JIT, and round-trips cleanly through the Tailwind-to-CSS direction.
When to expect a fallthrough
Complex selectors, animations, gradients and keyframes are deliberately not converted — they live in CSS layers that Tailwind handles via plugins or @apply blocks, and a heuristic mapping would lie about correctness. Those declarations stay verbatim inside [prop:value] arbitrary classes, so you keep them for review without losing data.
Frequently Asked Questions
- Which CSS properties are recognised?
- Padding and margin spacing scales, text and background colors, display, flex direction and alignment, font sizes and weights, border-radius, width and height, position and gap. Everything else falls through as an arbitrary [prop:value] class.
- What if a value is not in the default scale?
- The converter emits arbitrary notation such as p-[13px] or bg-[#3b82f6]. JIT compiles them and the class stays valid Tailwind without manual editing.
- Does it handle custom CSS variables?
- Yes. var(--token) values pass through as bracket notation; you keep the variable declared either in your tailwind.config theme or as a :root custom property.
- Is the conversion lossless?
- For common patterns yes. Animations, gradients and exotic selectors stay as arbitrary classes — they survive the conversion, but you may want to keep the original CSS for them.
- Can I round-trip with the Tailwind to CSS tool?
- Mostly. Simple utilities round-trip exactly. Arbitrary values survive, but if you have an unsupported declaration it remains in arbitrary form on the way back.
- Is anything uploaded?
- No. The entire conversion runs in this browser tab. Your stylesheet contents never leave the page.