Convertir CSS a Tailwind
Convierte CSS tradicional a clases de utilidad Tailwind. Gratis, en tu navegador.
Para qué sirve
Migra tu CSS a utility-first con Tailwind
Compatible con Tailwind v3 y v4
Las clases generadas son compatibles con las versiones modernas de Tailwind CSS y con el motor JIT para valores arbitrarios.
100% privado
Tu CSS se procesa en el navegador. Nunca se envía a servidores. Ideal para convertir estilos de proyectos propietarios.
Equivalencias precisas
Mapeo fiel entre propiedades CSS y clases Tailwind, con valores arbitrarios para propiedades sin equivalente exacto.
Instantáneo
Conversión en tiempo real. Pega tu CSS y las clases Tailwind aparecen al instante.
Cómo funciona
Tres pasos, sin complicaciones
Pega tu CSS
Introduce el bloque de CSS que quieres convertir. Puede ser un selector con sus propiedades o varias reglas CSS.
Obtén las clases Tailwind equivalentes
La herramienta mapea cada propiedad CSS a su clase de utilidad Tailwind más cercana. Las propiedades sin equivalente directo se muestran como valores arbitrarios con la sintaxis de corchetes.
Copia las clases y aplícalas en tu HTML
Copia las clases generadas directamente al atributo class de tu elemento HTML. Compatible con Tailwind CSS v3 y v4.
Preguntas frecuentes
¿Tienes dudas?
Tailwind CSS es un framework de CSS utility-first (utilidad primero) creado por Adam Wathan y lanzado en 2017. En lugar de definir componentes CSS prediseñados como Bootstrap, Tailwind ofrece clases de utilidad de bajo nivel (como `flex`, `pt-4`, `text-gray-700`) que se componen directamente en el HTML. Esto elimina la necesidad de escribir CSS personalizado para la mayoría de los estilos y facilita la consistencia del diseño.
La herramienta convierte la mayoría de las propiedades CSS comunes: layout (display, flexbox, grid, position), espaciado (margin, padding), tipografía (font-size, font-weight, line-height, color), fondos, bordes, sombras, opacidad y más. Las propiedades sin un equivalente exacto en Tailwind se expresan usando la sintaxis de valores arbitrarios de Tailwind, como `w-[123px]` o `bg-[#1a2b3c]`.
Tailwind incluye un sistema de valores arbitrarios que permite usar cualquier valor CSS dentro de corchetes: `w-[37px]`, `text-[#ff6600]`, `grid-cols-[1fr_2fr_1fr]`. Esto significa que cualquier propiedad CSS puede expresarse en Tailwind aunque no haya una clase predefinida para ese valor exacto. Los valores arbitrarios son compilados por el motor JIT (Just-In-Time) de Tailwind y solo se incluyen en el CSS final si se usan.
Esta herramienta convierte propiedades CSS base sin variantes de estado. Los pseudo-selectores como :hover, :focus, :active y los media queries se expresan en Tailwind con prefijos como `hover:`, `focus:`, `md:`, `lg:`. Para convertir CSS con estados complejos, el resultado puede usarse como punto de partida al que añadir manualmente los prefijos de variante necesarios.
No conviene convertir cuando el CSS tiene animaciones complejas con @keyframes, cuando usa propiedades experimentales o específicas del navegador sin soporte Tailwind, cuando el proyecto no usa Tailwind y añadirlo sería un cambio arquitectónico mayor, o cuando el CSS ya está bien organizado con BEM o CSS Modules y el equipo prefiere esa metodología. Tailwind brilla en proyectos nuevos o en redesigns completos.
Tailwind CSS: adopción 2020-2026, utility-first vs CSS semántico, estrategias de migración
Tailwind CSS fue creado por Adam Wathan y Steve Schoger, y lanzado públicamente en 2017. La versión 1.0 llegó en 2019, la v2 en noviembre 2020 con modo oscuro y JIT (inicialmente como plugin), y la v3 en diciembre 2021 con el motor JIT integrado por defecto. La v4 (2024-2025) reescribió el motor en Rust para compilación aún más rápida. Tailwind se convirtió en la librería CSS más descargada en npm, superando a Bootstrap.
El debate utility-first vs CSS semántico es uno de los más activos en la comunidad frontend. Los críticos de Tailwind argumentan que mezcla estructura y presentación en el HTML (contrario al principio de separación de responsabilidades), que el HTML con muchas clases Tailwind es difícil de leer, y que el CSS generado puede ser grande sin purge correcto. Los defensores argumentan que elimina el problema de naming de clases CSS, hace el diseño más consistente, y simplifica el mantenimiento al colocar estilos junto al markup.
Migrar proyectos existentes de CSS tradicional o Bootstrap a Tailwind es un proceso gradual. Las estrategias comunes incluyen: migración componente por componente, uso de @apply para preservar la separación de archivos CSS durante la transición, y adopción de Tailwind solo para nuevos componentes mientras se mantiene el CSS legacy. Herramientas como este conversor facilitan la fase inicial de migración al automatizar la traducción de propiedades CSS existentes a su equivalente Tailwind.