🌊 Tailwind ↔ CSS Converter

Convert plain CSS to Tailwind CSS utility classes instantly. Automatically maps colors, spacing, typography, and more. Free online CSS to Tailwind converter for developers.

Tailwind Classes

CSS Output

How to Use

Choose direction

Select "Tailwind → CSS" to convert class names to CSS properties, or "CSS → Tailwind" to go the other way.

Paste your code

Type or paste Tailwind classes (space-separated) or CSS properties in the input area.

Copy the output

Click Convert and then Copy to use the result in your project.

Frequently Asked Questions

What does Tailwind CSS do? +

Tailwind CSS is a utility-first CSS framework where you compose designs using small single-purpose classes directly in your HTML, like text-lg, font-bold, p-4, flex, items-center. Each class maps to one or a few CSS declarations.

When should I convert Tailwind to plain CSS? +

When you need styles in a non-HTML context (email templates, React Native, PDF generators), when working with a team that does not use Tailwind, or when extracting styles for a CSS component library.

Does this converter support all Tailwind classes? +

This tool covers the most common Tailwind v3 utility classes: spacing, typography, colors, flexbox, grid, sizing, borders, shadows, and more. Arbitrary value classes (like w-[350px]) are not supported.

How do I convert CSS back to Tailwind? +

Switch the direction to CSS → Tailwind and paste your CSS properties. The tool maps declarations like margin: 0.5rem to m-2, display: flex to flex, etc.

Is JIT mode supported? +

The converter handles standard Tailwind v3 classes including responsive prefixes (sm:, md:, lg:) and state variants (hover:, focus:, dark:). JIT arbitrary values ([value]) are not converted.

संपूर्ण गाइड: Tailwind CSS Converter

Tailwind Converter क्या है?

Tailwind CSS Converter regular CSS को equivalent Tailwind utility classes में convert करता है और vice versa। Tailwind CSS utility-first framework है जो component abstraction की जगह atomic classes use करता है। Legacy CSS को Tailwind में migrate करना या Tailwind classes को समझना इस tool से easier होता है।

यह tool CSS properties को exact Tailwind classes map करता है, custom values के लिए arbitrary value syntax (w-[123px]) suggest करता है।

कैसे उपयोग करें

CSS paste करें input में।
Convert direction select करें: CSS to Tailwind या Tailwind to CSS।
Convert click करें।
Generated classes copy करें।

Pro Tips

JIT mode में arbitrary values use करें: text-[#ff6b6b], mt-[13px]।
Frequently used combinations को @apply directive से component classes बनाएं।
Tailwind config customize करें brand colors और spacing scale add करने के लिए।