Does this cover all Tailwind classes?

It covers the most common utility classes (100+). Custom theme values and complex arbitrary values may not convert perfectly.

What about color classes?

Color classes (text-blue-500, bg-red-200) are shown as comments since the actual values depend on your Tailwind theme configuration.

Can I paste a full className string?

Yes. Paste space-separated classes like 'flex items-center p-4 text-sm font-bold' and each will be converted to its CSS equivalent.

Developer Tool

Tailwind to CSS Converter

Convert Tailwind CSS classes to their vanilla CSS equivalents. Paste your classes and get the standard CSS with proper properties and values.

100% free — no account needed

Tailwind Classes

classes converted: 7/7

Tailwind

flex

items-center

justify-between

p-4

rounded-lg

bg-white

shadow-md

CSS

display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem;
border-radius: 0.5rem;
/* bg-white: theme-dependent color */
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);

Tailwind → Vanilla CSS

Understand what your Tailwind classes do

100+ Classes

Supports spacing, sizing, text, flex, grid, display, border, and more.

Dynamic Patterns

Handles dynamic values like p-4, m-2, w-1/2, text-xl with proper calculation.

Prefix Support

Recognizes responsive (md:, lg:) and state (hover:, focus:) prefixes.

Copy CSS

One-click copy of the generated vanilla CSS output.

FAQ

Developer Tools

More CSS Utilities

CSS gradient, box shadow, flexbox playground, and more.