Convertidor CSS a Tailwind
Pega propiedades CSS y obtén las clases utilitarias equivalentes de Tailwind CSS al instante.
flex flex-col items-center justify-between gap-4 p-6 m-2 w-full rounded-lg bg-[#1a1a2e] text-[#ffffff] text-base font-semibold cursor-pointer overflow-hidden relative
¿Qué Es Tailwind CSS?
Tailwind CSS es un framework CSS utility-first que proporciona clases CSS de bajo nivel que compones directamente en tu HTML en lugar de escribir hojas de estilo personalizadas. En lugar de escribir display: flex; flex-direction: column; gap: 16px, escribes flex flex-col gap-4. El enfoque de Tailwind elimina los problemas de especificidad CSS, permite la creación rápida de prototipos y mantiene los estilos colocados con el markup.
Cómo Funciona el Convertidor
Pega una o más declaraciones de propiedades CSS en el cuadro de entrada (como padding: 16px o display: flex). El convertidor analiza cada declaración y busca la clase utilitaria de Tailwind que mejor coincida. Los valores de espaciado se mapean a la escala de 4px de Tailwind (p.ej., 16px → p-4). Los colores se producen como clases de valores arbitrarios como bg-[#FF5733]. Las propiedades sin equivalente directo en Tailwind se preservan como comentarios.
Qué Soporta Este Convertidor
El convertidor maneja las propiedades CSS más comunes: display, flexbox (flex-direction, justify-content, align-items, gap), grid, padding, margin, width, height, font-size, font-weight, text-align, border-radius, background-color, color, cursor, overflow, position y z-index. Los valores numéricos se mapean automáticamente al valor más cercano de la escala Tailwind.
Ejemplos CSS a Tailwind
- display: flex → flex
- padding: 16px → p-4
- border-radius: 9999px → rounded-full
- font-weight: bold → font-bold
- background-color: #1a1a1a → bg-[#1a1a1a]