Tailwind CSS ↔ Regular CSS Converter

A Tailwind CSS converter translates between Tailwind utility classes and regular CSS. Tailwind CSS uses a utility-first approach where you style elements with classes like flex items-center gap-4 p-6 rounded-lg instead of writing custom CSS properties. While Tailwind is incredibly popular, there are many scenarios where you need to convert between the two formats.

Converting Tailwind to CSS is useful when migrating away from Tailwind, generating email-compatible styles, or helping team members who think in CSS understand Tailwind code. Converting CSS to Tailwind is valuable when refactoring legacy stylesheets, onboarding to a Tailwind project, or translating design specs written in CSS values into Tailwind classes.

This bidirectional converter handles hundreds of Tailwind utilities including layout, flexbox, grid, spacing, typography, colors, borders, shadows, transitions, transforms, and responsive/pseudo-class prefixes (hover:, md:, dark:). It also recognizes Tailwind v4 syntax changes and provides migration notes. All conversion runs in your browser — your code never leaves your machine.

1. Choose your direction — Select "Tailwind → CSS" to convert utility classes to regular CSS, or "CSS → Tailwind" to convert CSS properties to Tailwind classes.
2. Enter your code — For Tailwind → CSS, paste your utility classes (e.g., flex items-center gap-4 p-6 bg-zinc-900 rounded-lg). For CSS → Tailwind, paste CSS rules with properties and values.
3. Click Convert — The converter generates the equivalent output. Tailwind → CSS produces a complete CSS rule with proper formatting. CSS → Tailwind produces a space-separated string of utility classes.
4. Review and copy — Check the output for any unmapped classes or properties (highlighted in yellow), then copy the result to your clipboard.

• Bidirectional conversion — Convert Tailwind utility classes to CSS and regular CSS back to Tailwind classes.
• Comprehensive utility support — Handles layout (flex, grid, position), spacing (padding, margin, gap), typography (font-size, weight, color), borders, shadows, opacity, transitions, transforms, z-index, overflow, cursor, and more.
• Responsive prefix handling — Converts responsive prefixes (sm:, md:, lg:, xl:, 2xl:) to proper @media (min-width: ...) queries and back.
• Pseudo-class support — Handles hover:, focus:, active:, disabled:, and other state prefixes, generating proper CSS pseudo-class selectors.
• Dark mode conversion — Converts dark: prefixed classes to @media (prefers-color-scheme: dark) CSS rules.
• Arbitrary value support — Recognizes Tailwind's arbitrary value syntax like w-[300px], text-[#ff6600], and grid-cols-[1fr_2fr].
• Tailwind v4 notes — Detects deprecated Tailwind v3 patterns and provides v4 migration guidance (e.g., bg-opacity → bg-color/opacity syntax).
• 100% client-side — Your code never leaves your browser. No server, no tracking.

• Learning Tailwind CSS — Paste CSS you know and see the equivalent Tailwind classes, or paste Tailwind classes to understand what CSS they generate.
• Email template development — Convert Tailwind-styled components to inline CSS for HTML emails, which don't support utility class frameworks.
• Migrating to/from Tailwind — Convert existing CSS stylesheets to Tailwind classes when adopting Tailwind, or convert Tailwind to CSS when moving away from it.
• Design handoff — Translate design specs written in CSS values (padding: 24px, border-radius: 8px) into Tailwind utility classes for developers.
• Code review assistance — Quickly check what CSS a dense string of Tailwind classes actually produces, making PR reviews easier.