Toolypet
CSS UTILITY

Tailwind CSS Converter

Convert between Tailwind CSS utility classes and vanilla CSS. Paste Tailwind to get CSS, or paste CSS to get the equivalent Tailwind classes.

Generated CSS
Enter Tailwind classes to see CSS output

Bridging Utility-First and Traditional CSS

Why Convert Between Tailwind and CSS?

Tailwind CSS has grown to over 7.5 million weekly npm downloads (2025), making it the most popular utility-first framework. Yet many teams maintain legacy CSS codebases, use CSS-in-JS solutions, or need vanilla CSS for component libraries that must remain framework-agnostic. Converting between the two is a daily task during migrations, code reviews where reviewers prefer reading CSS properties, and when extracting Tailwind prototypes into reusable design tokens.

The Tailwind Spacing System

1 unit = 0.25rem = 4px

Tailwind's spacing scale is built on a 4px base: p-1 = 4px, p-2 = 8px, p-4 = 16px, p-8 = 32px. This 4-point grid ensures consistent spacing across your entire UI. The scale is non-linear above 12: after p-12 (48px), it jumps to p-14 (56px), then p-16 (64px), increasing in larger increments. For values outside the scale, use arbitrary values like p-[13px] or p-[2.5rem].

Performance: Utility CSS vs. Traditional

A typical Tailwind project with PurgeCSS produces a 5–15 KBCSS bundle (gzipped), regardless of project size. Traditional CSS tends to grow linearly with features — a medium SaaS app might ship 200–500 KB of CSS. Tailwind's utility classes are infinitely reusable: flex items-center is written once in the stylesheet and referenced thousands of times in HTML. The trade-off is larger HTML files (more class attributes), but HTML compresses extremely well with gzip/brotli because repeated class strings are ideal for dictionary-based compression.

What Cannot Be Converted 1:1

Responsive prefixes (md:flex, lg:grid-cols-3) compile to @media queries that cannot be expressed as inline styles. State variants (hover:bg-blue-500, focus:ring-2) map to pseudo-selectors. Dark mode (dark:bg-gray-900) uses a prefers-color-scheme media query or a class-based toggle. This converter handles the static utility-to-property mapping. For responsive/state conversions, you need the full Tailwind compiler or manual media query wrapping.

Frequently Asked Questions

Why do some Tailwind classes show as “unrecognized”?

This converter supports Tailwind's core utility classes and spacing scale. Color utilities (like bg-blue-500 or text-gray-700), responsive prefixes (md:, lg:), and state variants (hover:, focus:) are flagged as unrecognized because they depend on your Tailwind configuration (custom colors, breakpoints). The converter handles layout, spacing, typography, borders, shadows, and other config-independent utilities.

How accurate is the CSS-to-Tailwind conversion?

The reverse conversion (CSS to Tailwind) matches exact property-value pairs against Tailwind's default output. It works best with standard values that align with Tailwind's scale (e.g., padding: 1rem maps to p-4). Custom values like padding: 13px have no exact Tailwind equivalent and will appear as unrecognized. In those cases, use arbitrary value syntax: p-[13px].

Should I migrate my entire CSS codebase to Tailwind?

Not necessarily in one shot. The recommended approach is incremental adoption: new components use Tailwind, existing components stay as-is until they need modification. Tailwind coexists peacefully with traditional CSS — its utility classes have no specificity conflicts with BEM or module-scoped styles. Many large codebases (Shopify, GitHub, Netflix) run both systems in parallel during multi-year migrations. This converter helps during the transition by letting you quickly understand what a block of Tailwind classes actually does in CSS terms.