Local Tools Online

Tailwind → CSS Converter

Sometimes you need the plain CSS behind a set of Tailwind classes — extracting a single component to use in a project without a Tailwind build pipeline, documenting a design system for a team that doesn’t use Tailwind, or just understanding exactly what a long class string like flex items-center justify-between gap-4 rounded-lg border border-gray-200 px-4 py-2 shadow-sm actually resolves to. This tool takes Tailwind utility classes and outputs the equivalent standard CSS rules.

Why local processing matters here

The class strings people run through this tool are almost always pulled from real markup in a real, often non-public, project — a client site, an internal tool, or a product ahead of its public launch. That’s proprietary front-end code, even if it’s just a handful of utility classes rather than a whole file. A server-side converter has no way to guarantee those class strings, and whatever surrounding context gets pasted along with them, aren’t retained somewhere. The conversion runs entirely in the browser, so nothing about the component you’re extracting has to leave your machine to get the plain CSS out.

How to use it

  1. Paste the Tailwind class string exactly as it appears in your markup — space-separated classes on a single element work best.
  2. The tool parses each utility and outputs the corresponding standard CSS property and value, grouped as a single rule block.
  3. Responsive prefixes (sm:, md:, lg:) are converted into the corresponding media query, with the base (unprefixed) classes forming the default rule outside any media query.
  4. State variants like hover:, focus:, and disabled: are converted into their corresponding pseudo-class selectors, applied to the same base selector.
  5. Copy the output CSS and apply it as a class or inline style, replacing the Tailwind classes in a non-Tailwind environment.
  6. If you’re extracting more than one element, convert them one at a time rather than pasting several class strings together — it keeps the output CSS block correctly scoped to the right selector.

Common situations this solves

  • Extracting a single component built in Tailwind to reuse in a project that doesn’t have a Tailwind build step.
  • Documenting the actual CSS behind a design system’s components for a style guide or handoff document.
  • Understanding what a long, unfamiliar Tailwind class string actually does before modifying it.
  • Converting a Tailwind-based email template into plain CSS, since most email clients don’t support Tailwind’s build process directly.
  • Debugging a visual difference between two elements by comparing their resolved CSS side by side instead of just their class lists.

FAQ

Why does the output CSS look longer than the original class string? This is expected — Tailwind’s utility classes are compact shorthand for specific CSS declarations, and a short class string can expand to several lines of standard CSS once every value and pseudo-class variant is written out explicitly.

Does this handle Tailwind’s custom theme values, or only defaults? It converts based on Tailwind’s default spacing, color, and typography scales. If your project uses a customized tailwind.config with non-default values, the numeric or named values in the output may not exactly match your project’s actual theme — worth double-checking against your config for anything customized.

What happens with arbitrary value classes, like w-[327px]? Arbitrary values convert directly and predictably, since the exact value is already specified in the class name itself — these are actually some of the more reliable conversions since there’s no ambiguity about which scale value was intended.

Can I convert an entire component with multiple elements at once? It’s more reliable to convert one element’s class string at a time and assemble the CSS yourself, since batching multiple elements risks mixing up which declarations belong to which selector.

Does this handle Tailwind’s @apply directive? If you’re pasting the classes from inside an @apply rule rather than from markup, the conversion works the same way — @apply is just Tailwind’s syntax for applying utility classes inside a custom CSS rule, and the resulting classes convert identically either way.

If I want to go the other direction — starting from CSS and getting Tailwind classes — is there a tool for that? Yes, the CSS → Tailwind Converter does the reverse conversion, useful when migrating an existing plain-CSS project onto Tailwind rather than extracting Tailwind out to plain CSS.

If the extracted CSS is going into an email template specifically, the CSS Inliner is worth running afterward, since most email clients require styles to be inlined on each element rather than defined in a stylesheet or media query block.