RunLocalTools

Tailwind to CSS Converter — See the Real CSS Behind Any Class String

Paste Tailwind utility classes and get the plain CSS they actually produce — responsive breakpoints, hover/focus/dark variants, and arbitrary values all resolve into real, readable CSS rules. Free, no signup, runs in your browser.

BODY:

What it does

Paste a string of Tailwind classes — flex items-center gap-4 bg-blue-500 hover:bg-blue-600 md:px-8 — and this tool resolves every utility into the plain CSS it represents, grouped into a base rule plus any responsive, state, or dark-mode blocks the classes require. It’s built for anyone who needs to hand off Tailwind-based markup to a plain-CSS codebase, debug what a class combination actually renders, or just double-check an unfamiliar utility before shipping it.

How it works

Each class is split into its variant prefixes (md:, hover:, dark:, arbitrary variants like [&:nth-child(3)]) and its base utility, then the base utility is looked up against Tailwind’s default theme — the standard spacing, color, typography, and sizing scales, not a guess. Responsive prefixes become @media (min-width: ...) blocks, pseudo-class variants become real :hover/:focus/:checked selectors, and dark: classes become either a .dark parent selector or a prefers-color-scheme media query, whichever strategy you pick.

Two utilities — rounded/shadow short names and the bare ring width — genuinely mean different pixel values depending on whether the classes came from Tailwind v3 or v4 (v4 shifted the whole scale down one rung). The version toggle resolves that ambiguity correctly instead of guessing one version’s meaning for both.

Arbitrary values (w-[137px], bg-[#1da1f2]) and the ! important modifier (both the v3 leading-! and v4 trailing-! forms) are parsed directly. Anything the engine doesn’t recognize — a typo, a plugin-only class, or a custom tailwind.config value — is listed separately rather than silently dropped or guessed at.

How to use it

  1. Paste your class string into the input box, or click “Try example” to see a sample.
  2. Pick a dark-mode strategy (.dark class or prefers-color-scheme) and the Tailwind version the classes came from.
  3. Read the generated CSS on the right, grouped by variant — copy the whole block or copy-per-line for batch input.
  4. For batch conversion, put each element’s classes on its own line — every line becomes its own CSS block.
  5. Use “Copy as” to switch between plain CSS, SCSS, or an @apply directive block.

Going the other direction — turning existing CSS into Tailwind classes — is covered by the companion CSS → Tailwind Converter.

FAQ

Does it support every Tailwind utility? It covers the core set most projects actually use — spacing, sizing, typography, the full color palette, flexbox/grid, borders, effects, transforms, transitions, and positioning — plus arbitrary values. Third-party plugin classes and custom tailwind.config values aren’t recognized, since there’s no way to know your config from a class string alone; those are flagged, not guessed.

What does the live preview show? It applies the literal CSS this tool generated to a real element, so you’re confirming the actual output — not a re-implementation that could quietly disagree with the text above it.

Why do I need to pick a Tailwind version? A few utilities — rounded-sm, shadow-sm, and bare ring — resolved to different pixel values between v3 and v4. Picking the right version means the CSS you get back matches what your project actually renders.

Can it handle group-hover: and peer-checked: variants? Yes, using the standard descendant/sibling-combinator selectors Tailwind itself generates. Named group/peer variants (group/name) aren’t supported yet.

Is there a size limit on the input? No hard limit, but very long batch input (dozens of lines) will take a moment longer to render since each line is parsed independently.