Skip to main content
CodeAlchemy

Try other tools

View all

Figma → Code

Turn Figma frames into React, Vue, or Svelte components instantly.

client-sidefree

OpenAPI → TS

Generate TypeScript interfaces and Zod schemas from any OpenAPI spec.

client-sidefree

Palette → Tokens

Turn a color palette into CSS variables, Tailwind config, and Token Studio JSON.

client-sidefree

Long-form guide

Convert Tailwind utility classes to vanilla CSS — and back

The Tailwind ↔ CSS Converter is the fastest way to translate between the utility-first authoring style and plain CSS. Paste markup full of flex items-center gap-4, get back a single readable rule. Paste a CSS block, get back the closest set of Tailwind utilities. Both directions handle the kinds of details that quietly waste your afternoon: arbitrary values, dark mode, responsive prefixes, hover states, and pseudo-elements.

How to use it

  1. Pick a direction. The tool starts in Tailwind → CSS mode because that's what most teams need when they're migrating, debugging a build, or copying a snippet out of a design system. Use the toggle at the top of the editor to flip to CSS → Tailwind when you have raw CSS that you want to express in utilities.
  2. Paste your input on the left. You can drop an entire HTML fragment with multiple elements, a single class="..." string, or a block of CSS rules. The editor accepts all three. There's no need to clean up the input first; the parser ignores tags and attributes outside of class names.
  3. Hit Convert (or press ⌘↵ / Ctrl↵). The output appears on the right, syntax-highlighted and ready to copy. Keyboard shortcuts work in both panels, so you can stay on the keys.
  4. Tweak the options. Group by element combines all classes belonging to a single element into one CSS rule, which is what you want for production code. Toggle it off to see each utility expand to its own one-property rule, which is useful when you're learning how a class actually compiles.
  5. Copy, download, or share. Use the copy button for a one-line transfer to your clipboard. Use download to save a .css file directly. Use share to generate a permalink that contains your input — perfect for pairing or filing a bug report.

What the converter understands

Variants and modifiers are preserved on the way out. hover:bg-emerald-500 becomes a :hover selector. dark:bg-slate-900 is wrapped in .dark &. Responsive prefixes like md:, lg:, and xl: produce real @media (min-width: …) queries with Tailwind's default breakpoint values, and you can mix multiple variants on one utility — md:hover:dark:opacity-70 resolves correctly.

Arbitrary values are kept verbatim. That means bg-[oklch(0.70_0.22_142)] produces background-color: oklch(0.70 0.22 142) and grid-cols-[repeat(auto-fill,minmax(220px,1fr))] survives intact. Color opacity modifiers like bg-emerald-500/50 are expanded into the modern rgb(... / 0.5) form.

In the reverse direction, the tool tries to map your CSS to the most idiomatic Tailwind utility set. It detects breakpoint media queries and attaches md: / lg: prefixes. It collapses repeated rules into a single class list. When a property has no utility equivalent — vendor prefixes, exotic gradients — it leaves the raw CSS in place and flags it inline, so you know what to handle by hand.

When to reach for it

Migrations are the obvious case. A team coming from a vanilla CSS codebase can paste a stylesheet and get a starting set of utilities in minutes instead of doing it by hand. The opposite is also common: design systems that want to ship reusable component classes can take a Tailwind-heavy file and emit something that lives happily in Sass or CSS Modules.

It's also a great learning tool. New developers can paste a tutorial's class string and watch the cascade behind it. Senior developers debugging a class change can see exactly which media queries and pseudo-classes will fire.

Examples

Card layout
Input · html
<div class="flex items-center gap-4 p-6 rounded-xl bg-white shadow-md">
  <div class="size-12 rounded-full bg-emerald-500"></div>
  <div class="text-sm font-medium text-slate-900">Hello</div>
</div>
Output · css
.card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem;
  border-radius: 0.75rem;
  background-color: #fff;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}
Responsive grid
Input · html
<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3"></div>
Output · css
.grid-wrap {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1rem;
}
@media (min-width: 768px) {
  .grid-wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .grid-wrap { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
Arbitrary value with variant
Input · html
<button class="bg-[oklch(0.70_0.22_142)] hover:bg-[oklch(0.62_0.19_142)] text-white px-4 py-2 rounded-lg">Action</button>
Output · css
.btn {
  background-color: oklch(0.70 0.22 142);
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
}
.btn:hover {
  background-color: oklch(0.62 0.19 142);
}

Frequently asked questions

Yes. Both directions are free with no sign-up, no rate limits, and no paywall. The Tailwind → CSS direction runs entirely in your browser, so we literally cannot count or limit conversions.