CSS → utilidades Tailwind
Privacidad por diseño — se ejecuta completamente en tu navegador
Pega declaraciones CSS a la izquierda y copia las clases utilitarias de Tailwind a la derecha. El conversor mapea las escalas estándar de spacing, color, tipografía y layout a las utilidades nativas, y recurre a la notación entre corchetes para los valores que Tailwind no conoce de fábrica.
Propiedades mapeables
El conversor entiende el CSS del día a día: padding y margin, tamaños y pesos de fuente, color (text y bg), display, dirección y alineación flex, border-radius, width y height, position y gap. Cada uno cae en su atajo canónico — p-4, text-lg, justify-between — y el output se lee como Tailwind hecho a mano.
Por qué importa la notación arbitraria
En código real abundan los valores sin shortcut: un font-size custom de 13px, una marca con hex propio, un gap de 1.7rem. Cuando el conversor encuentra uno, emite la forma arbitraria — text-[13px] o bg-[#3b82f6]. La clase sigue siendo Tailwind válido, JIT-compilable, y round-trippea limpio con la herramienta inversa.
Cuándo esperar un fallthrough
Selectores complejos, animaciones, gradientes y keyframes no se convierten a propósito — viven en capas que Tailwind cubre con plugins o @apply, y un mapeo heurístico mentiría sobre la corrección. Esas declaraciones salen verbatim en clases [prop:value] para revisarlas sin perder datos.
Preguntas frecuentes
- ¿Qué propiedades CSS reconoce?
- Escalas de spacing para padding y margin, colores de texto y fondo, display, alineación flex, tamaños y pesos de fuente, border-radius, width y height, position y gap. Lo demás cae a clase arbitraria [prop:value].
- ¿Y si el valor no entra en la escala estándar?
- Sale en notación arbitraria como p-[13px] o bg-[#3b82f6]. El JIT lo compila y la clase sigue siendo Tailwind válido sin edición manual.
- ¿Maneja variables CSS personalizadas?
- Sí. Los valores var(--token) salen entre corchetes; mantén la variable declarada en el theme de tailwind.config o como custom property en :root.
- ¿La conversión es sin pérdidas?
- En patrones comunes, sí. Animaciones, gradientes y selectores exóticos quedan como clases arbitrarias — sobreviven, pero quizá te interese conservar el CSS original.
- ¿Se puede ida y vuelta con Tailwind-to-CSS?
- En su mayoría. Utilities simples vuelven idénticos; valores arbitrarios sobreviven, pero las declaraciones sin soporte se quedan en arbitrary también al regreso.
- ¿Se sube algo?
- No. Todo el proceso ocurre en esta pestaña; el contenido de tu hoja de estilos no sale de la página.