🌊 Convertidor CSS Tailwind a CSS Plano

Convert Tailwind CSS utility classes to plain CSS and back. Supports Tailwind v3 classes including spacing, colors, flexbox, grid. Free online converter.

Paste a list of Tailwind classes (like flex items-center p-4 text-lg font-bold) and get the equivalent plain CSS properties. Switch direction for CSS → Tailwind conversion. Useful when migrating projects or working without Tailwind in scope.

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.