Conversor de Tailwind CSS
Convierte CSS puro a clases utilitarias de Tailwind CSS y viceversa. Soporta margin, padding, display, flex, grid, colores, tipografía, bordes y más.
Entrada CSS
Salida Tailwind
Pega CSS a la izquierda para generar clases Tailwind
Conversor de Tailwind CSS
Convierte CSS puro a clases utilitarias de Tailwind CSS y viceversa. Soporta margin, padding, display, flex, grid, colores, tipografía, bordes y más.
Características
- Convierte propiedades CSS a clases utilitarias de Tailwind CSS al instante
- Modo inverso: convierte clases Tailwind de vuelta a CSS puro
- Soporta más de 50 propiedades CSS incluyendo flex, grid, espaciado, colores y tipografía
- Maneja valores arbitrarios con la notación de corchetes de Tailwind
- Reconoce la escala de espaciado predeterminada, la paleta de colores y los breakpoints de Tailwind
- Resalta propiedades no mapeadas para que sepas qué necesita conversión manual
Cómo usar
- Pega tu código CSS en el panel izquierdo o haz clic en Ejemplo para CSS de muestra.
- Visualiza las clases Tailwind generadas instantáneamente en el panel derecho.
- Haz clic en Intercambiar para cambiar al modo inverso y convertir clases Tailwind de vuelta a CSS.
Preguntas frecuentes
¿Qué propiedades CSS son soportadas?
El conversor soporta más de 50 propiedades CSS comunes incluyendo display, position, diseño flex/grid, margin, padding, width, height, font-size, font-weight, colores, border, border-radius, opacity, box-shadow, z-index, overflow, cursor y muchas más. Las propiedades no soportadas se listan como comentarios no mapeados.
¿Puedo convertir clases Tailwind de vuelta a CSS?
Sí. Haz clic en el botón Intercambiar para cambiar al modo inverso. Introduce clases utilitarias de Tailwind separadas por espacios, y la herramienta generará las declaraciones CSS equivalentes envueltas en un selector .element.
¿Cómo se mapean los colores?
El conversor reconoce la paleta de colores predeterminada de Tailwind (slate, gray, red, blue, green, yellow, purple) en varias tonalidades (50-900). Los valores hexadecimales como #3b82f6 se mapean a blue-500. Los colores no reconocidos usan la sintaxis de valores arbitrarios de Tailwind, p.ej. bg-[#custom].
¿Maneja propiedades CSS abreviadas?
Sí. Las propiedades abreviadas como margin, padding y border se analizan y convierten a sus equivalentes de Tailwind. Por ejemplo, margin: 8px 16px se convierte en my-2 mx-4, y border: 1px solid #ccc se convierte en border border-solid border-[#ccc].
¿Se envían mis datos CSS a un servidor?
No. Toda la conversión ocurre completamente en tu navegador usando JavaScript del lado del cliente. Tu código CSS nunca sale de tu dispositivo, haciendo esta herramienta completamente privada y segura para usar con código propietario.
¿Qué pasa con las propiedades no soportadas?
Las propiedades que no pueden mapearse a una clase estándar de Tailwind se listan como comentarios en la salida. Esto te permite ver exactamente qué propiedades necesitan manejo manual o configuración personalizada de Tailwind.
¿Soporta valores arbitrarios de Tailwind?
Sí. Cuando un valor CSS no coincide con la escala predeterminada de Tailwind, el conversor usa sintaxis de valores arbitrarios como p-[13px] o text-[22px]. En modo inverso, los valores arbitrarios como w-[200px] se analizan correctamente de vuelta a width: 200px.