Is my code sent to a server?

No. All Tailwind-to-CSS conversion happens 100% client-side in your browser using a local AST-lite parser. Your code never leaves your device.

Which Tailwind utilities are supported?

The converter supports spacing, colors, typography, flexbox, grid, borders, shadows, responsive breakpoints (sm:, md:, lg:, xl:), pseudo-class modifiers (hover:, focus:, active:), and arbitrary values like w-[200px].

Can I use this for migrating away from Tailwind?

Yes. This is the primary use case. Paste your Tailwind className string and get clean, standards-compliant Vanilla CSS that you can drop directly into a non-Tailwind project.

Tailwind to CSS Converter

Migrating a component out of Tailwind? Paste your className string below and instantly generate clean, production-ready Vanilla CSS using a 100% offline AST-lite parser.

CSS Class Selector

Tailwind CSS Utilities

Generated Vanilla CSS

.custom-card {
  display: flex;
  align-items: center;
  padding: 1rem;
  background-color: var(--color-slate-900);
  border-radius: 0.75rem;
  border-width: 1px;
  border-color: var(--color-slate-800);
  color: #ffffff;
  width: 100%;
}

@media (min-width: 768px) {
  .custom-card {
    padding: 2rem;
  }
}

.custom-card:hover {
  background-color: var(--color-slate-800);
}

How does this work?

This tool uses a client-side tokenizer to map standard Tailwind utilities (like p-4, flex, and items-center) directly to their standard CSS equivalents.

Modifier prefixes like hover: and md: are automatically extracted and output as pseudo-selectors and media queries.

Why CSS variables for colors?

For colors (e.g., bg-blue-500), the output maps to modern CSS variables (var(--color-blue-500)), making it perfectly suited for teams building their own design systems or web component libraries. Your data never leaves your browser.