Tailwind to CSS Converter

Convertí utility classes de Tailwind a CSS plano

🔒 100% en el browser🆓 Gratis para siempre⚡ Sin sign-up

Nota: La interfaz de la herramienta de abajo por ahora solo está en inglés. Estamos traduciéndolas una a una. Ver esta herramienta en inglés →

Tailwind classes

CSS output

.element {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: 1rem;
  padding-block: 0.5rem;
  background-color: #3b82f6;
  color: #ffffff;
  border-radius: 0.5rem;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

Covers the most common Tailwind utilities: spacing, colors, typography, flexbox, borders, and shadows. Arbitrary values like p-[13px] pass through. Responsive/state variants (md:, hover:) and custom theme tokens aren't resolved.

Cómo funciona

1
Pegá classes de Tailwind
Soltá una lista de classes de tu JSX/HTML - ej. 'flex items-center gap-4 p-6 bg-blue-500'.
2
Leé el CSS
Cada utility se expande a una declaración CSS plana, lista para pegar en una stylesheet.
3
Copiá el bloque
Wrappealo en tu propio selector - la tool sale con un placeholder .element {...}.

Sobre Tailwind to CSS Converter

Tailwind to CSS converter gratis online. Pegá cualquier lista de utility classes de Tailwind y sacá declaraciones CSS equivalentes. Cubre spacing, colors, typography, flexbox, borders y shadows. Útil para migrar fuera de Tailwind o extraer a una component stylesheet. Tailwind to CSS Converter en 712 Tools corre entero dentro de tu browser con APIs nativas de JavaScript - ningún server ve tus datos. Eso significa resultados al instante, privacidad total y sin límites de upload.

Ya sea para una sesión de debug, una comprobación rápida o un incidente en producción, esta herramienta es gratis y sin límite de usos. Sin watermarks, sin sign-up y sin ads dentro de la herramienta.

Preguntas frecuentes

¿Soporta responsive y state variants?

Aún no - esta tool convierte utilities base. Variants como md:, hover: y dark: necesitan wrappearse a mano en @media / :hover.

¿Y arbitrary values tipo p-[13px]?

Sí - los values entre brackets pasan directo al valor de la property.

¿Usa mi config de Tailwind?

No. Usa el default theme (spacing scale y colors por defecto). Tokens custom del theme son desconocidos para la tool.

¿Qué versión de Tailwind?

Las utilities default matchean Tailwind 3.x y 4.x - ambas comparten el mismo utility set base.

Leer más

5 min de lectura

Tailwind to plain CSS: migration, extraction, and component patterns

You inherited a Tailwind codebase and want to extract a component library. Or you're moving away from Tailwind entirely. Here's how the utility classes map to real CSS.

JSON to CSV

Convertí JSON arrays a CSV descargable

Timestamp Converter

Convierte entre Unix time, ISO 8601 y fechas legibles

Markdown to HTML

Convierte Markdown a HTML limpio con preview en vivo

YAML ↔ JSON

Convertí YAML a JSON y viceversa con validación completa

JSON → TypeScript

Generá interfaces o types de TypeScript desde un sample JSON

Base Converter

Convertí entre binary, octal, decimal y hex