🌊 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.

Guía: Convertidor CSS a Tailwind

¿Qué es?

Traduce CSS existente a clases utilitarias Tailwind equivalentes. Útil para migrar CSS legado, entender qué clase corresponde a un valor específico, y acelerar la adopción de Tailwind en proyectos existentes.

Cómo usar

Pega tu CSS en la entrada.
Las clases Tailwind aparecen en el panel derecho.
Copia las clases para tu HTML/JSX.

Consejos

Para valores sin clase exacta, usa sintaxis arbitraria: w-[342px].
Extiende el tema en tailwind.config.js con tus valores de diseño.
Usa @apply con moderación — va contra la filosofía de Tailwind.