Tailwind to CSS Converter

How to use

1. 1Paste the Tailwind class string into the input. Use a copied class="..." value, or click one of the Examples to get started.
2. 2Edit the Selector field if you want the combined CSS block scoped to something other than .element (try .card, button.primary, or #header).
3. 3Pick the Output format: CSS rule block wraps the rules in selector { ... }; Property list returns just the property: value; lines for nesting inside your own selector.
4. 4Read the Combined CSS card for the merged stylesheet of every base (non-variant) class.
5. 5Use the Per-class breakdown to inspect what each utility expands to, with notes for variants like md:, hover:, dark:, and !important.
6. 6Click Copy CSS to lift the combined rule block to the clipboard.

About this tool

Tailwind to CSS Converter turns a string of Tailwind utility classes into the plain CSS rules they compile to. Paste anything you would put inside class="..." and the tool returns a per-class breakdown (each utility with its CSS properties) plus a single combined CSS rule block ready to drop into a stylesheet under any selector you choose. It covers the Tailwind v3.4 / v4 default theme: the spacing scale (m, mt, p, gap, space, scroll-m, inset) on the quarter-rem base step, sizing utilities (w, h, min-w, min-h, max-w, max-h, size) with keywords like full, screen, fit, min, max and the standard fraction tokens (1/2, 2/3, 5/12), typography (font-sans/serif/mono, font-thin through font-black, the text-xs to text-9xl scale with bundled line-height, leading and tracking), the complete color palette across 22 hues and 11 shades for text-, bg-, border-, ring-, and outline-, border widths and styles by side, the rounded-* corner radius scale on every corner, shadow sizes, opacity, z-index, grid (grid-cols-N, col-span-N, row-span-N), flex direction/wrap/align/justify, position keywords with top/right/bottom/left/inset, aspect ratio (square, video, arbitrary values), object-fit and object-position, cursor, user-select, pointer-events, transitions and durations, blur, and the SR-only utility. Arbitrary values like p-[14px], text-[#bada55], or w-[42rem] are passed straight through. Negative spacing (-mt-4), opacity modifiers (bg-blue-500/50), and the ! important prefix are all handled. Variant prefixes like md:, hover:, dark:, and focus-visible: are recognized and tagged with the selector or media query they target so you know how to scope them. Useful for migrating off Tailwind, recreating a component in a project that does not use it, debugging a confusing class string, or learning what a single utility actually does. Everything runs in your browser. No code is uploaded.

Free to use. Works in your browser. No signup, no login.