Tailwind Classes to CSS

Paste a list of Tailwind CSS utility classes and instantly get the equivalent plain CSS. This tool is handy when you need to move a component out of a Tailwind project, understand what a cluster of utilities actually does, debug specificity, or hand a designer or a non-Tailwind codebase real CSS rules instead of class names.

How to use it

1. Paste your space-separated Tailwind classes into the input box, for example flex items-center justify-between p-4 text-lg font-bold text-blue-500.
2. Optionally set the CSS Selector used for the generated rule (defaults to .element).
3. The equivalent CSS appears on the right, ready to copy or download.

Classes are grouped by variant: base utilities land in one rule, hover: / focus: utilities get their own pseudo-class rule, and responsive prefixes like md: are wrapped in the matching @media query.

What it converts

The converter uses a curated map of the most common Tailwind v3 utilities rather than a full compiler, so coverage is broad but finite. Supported categories include:

• Layout & display — flex, grid, block, hidden, inline-*, table-*, flow-root
• Position & inset — relative, absolute, fixed, sticky, top-*, inset-*, z-*
• Flexbox & grid — direction, wrap, grow/shrink, items-*, justify-*, content-*, self-*, place-*, grid-cols-*, col-span-*, gap-*
• Spacing — margin and padding (m, mx, pt, …) including negative values, on the full spacing scale
• Sizing — w-*, h-*, min-*, max-w-*, size-*, fractions, full, screen
• Typography — text-{size}, font-{weight}, text-{color}, leading-*, tracking-*, alignment, decoration, transform, truncate
• Backgrounds & borders — bg-{color}, gradients, border-* widths/colors/styles, rounded-*
• Effects — shadow-*, opacity-*
• Transforms & transitions — translate-*, rotate-*, scale-*, skew-*, transition, duration-*, delay-*, ease-*
• Colors — the complete Tailwind v3 palette (slate through rose, all shades 50–950) plus black, white, transparent, current
• Arbitrary values — bracketed utilities such as w-[42px] or bg-[#123456] for a mapped set of prefixes

Variants

State variants (hover, focus, active, disabled, first, last, odd/even, …), pseudo-elements (before, after, placeholder, …), attribute variants (rtl, ltr), group-* / peer-*, and responsive/media variants (sm–2xl, max-*, dark, print, motion-*, contrast-*, orientation) are all recognized and expanded into the appropriate selector or @media block.

Scope & limits

This is a faithful lookup table, not the Tailwind engine. It does not read your tailwind.config.js, so custom theme values, plugins, and JIT-only features are out of scope. Complex effects that Tailwind implements with CSS variables (ring, filters, multi-stop gradients) map to the utility's static form. Any class it does not recognize is reported as a /* No equivalent for "..." */ comment in the output rather than dropped silently, so you always know what was skipped.

Privacy

The conversion runs entirely in your browser. Your class list is never uploaded to a server.