See exactly what a Tailwind class produces — then copy the plain CSS into any project.
Why this exists. Tailwind is great, but sometimes you need the raw CSS: a non-Tailwind codebase, an email template, a design-token audit, or a one-off page. Instead of installing the Tailwind Playground or digging through source, paste the classes and get equivalent CSS instantly.
What it covers. The built-in rule engine handles the most-used utilities:
- Layout: flex, grid, gap, display, position, z-index, overflow
- Spacing: padding (p/px/py/pt/pr/pb/pl), margin (m/mx/my/…), space-x/space-y
- Sizing: width, height, max/min (w-4, h-screen, max-w-md…)
- Colors: background, text, border (bg-red-500, text-blue-200/75, border-gray-300)
- Typography: font-size, font-weight, line-height, text-align, letter-spacing
- Borders: border width, radius, style
- Effects: shadow, opacity, blur
- Transforms & transitions: scale, rotate, translate, duration, ease
- Variants: responsive (sm/md/lg/xl/2xl) and state (hover/focus/active)
The opacity modifier. Tailwind v3's bg-blue-500/20 syntax (color + alpha) is expanded into rgba() so it works everywhere — no color-mix() needed.
Scope selector. Wrap the output under a custom selector (.my-card { ... }) or dump raw variables. Great for scoping a snippet to a component without a build step.
Limitations. This is a static rule table, not the full Tailwind JIT engine, so arbitrary values like w-[327px] and custom theme extensions are best-effort. For 100% fidelity use the official Tailwind compiler; this tool is for quick lookups and copy-paste.