Convertidor CSS a Tailwind

Pega CSS antiguo y recibe un punto de partida utility-first para migrar, limpiar o reescribir rápido con Tailwind.

La salida convertida aparecerá aquí.

Por qué usar un convertidor CSS a Tailwind

Acelera migraciones

Mueve CSS legacy hacia Tailwind más rápido convirtiendo declaraciones conocidas en candidatas a utility classes.

Soporte para valores arbitrarios

Conserva valores poco comunes con la sintaxis arbitraria de Tailwind cuando no existe una utility estándar.

Refactor con revisión humana

Usa la salida como borrador y después simplifica valores repetidos en tokens, componentes, variantes o patrones reutilizables.

Propiedades convertidas con frecuencia

displaypositionmarginpaddingwidthheightcolorbackgroundborder-radiusfont-sizeflexboxz-indexopacity

Selectores complejos como :hover, ::before o media queries pueden necesitar limpieza manual después de convertir.

Preguntas frecuentes

¿La salida queda lista para producción?

No siempre. La conversión automática es un punto de partida. Selectores complejos, reglas responsive, pseudo-elementos, cascade y semántica de componentes necesitan revisión.

¿Puedo pegar declaraciones sin selector?

Sí. La herramienta envuelve temporalmente declaraciones sueltas para poder procesarlas.

¿Qué hago con valores arbitrarios repetidos?

Si un valor se repite en la UI, conviene convertirlo en token de tema, clase de componente o primitiva de diseño.

¿Convierte media queries y estados hover?

Algunas declaraciones simples se pueden traducir, pero variantes responsive, hover, pseudo-elementos y selectores anidados suelen requerir limpieza manual.