Conversor de Tailwind a CSS
Expande utilidades Tailwind a declaraciones CSS.
Sobre esta herramienta
Esta herramienta expande las clases de utilidad más habituales de Tailwind en un bloque de reglas CSS. Las variantes como hover: o md: se señalan en las notas, porque necesitan un selector propio o una media query.
Cómo usar
Copia las clases desde un componente, ejecuta la conversión y traslada las declaraciones a tu hoja de estilos o compáralas con tus tokens de diseño. Las utilidades no reconocidas quedan listadas en las notas.
Ejemplo
El ejemplo incluido usa utilidades comunes de maquetación y espaciado.
Entrada
flex items-center gap-4 p-6 rounded-lg bg-white shadow-lg text-gray-900 font-semiboldSalida
.element {
display: flex;
align-items: center;
gap: 1rem;
padding: 1.5rem;
border-radius: 0.5rem;
/* …mapped declarations… */
}Consejo
Resulta especialmente útil cuando el equipo mantiene una capa de CSS propia junto a Tailwind.
Conviene saber
¿Qué clases de Tailwind entiende?
Un subconjunto práctico: display y position, alineación flex, la escala de espaciado para padding, margin, gap y tamaños, tamaño y grosor de fuente, border-radius, algunas sombras, columnas de grid, opacidad, z-index, una lista corta de colores comunes y valores arbitrarios como w-[320px] o bg-[#38bdf8]. Todo lo demás se lista en las notas en lugar de adivinarse.
¿Qué pasa con hover:, md: y otras variantes?
Se señalan en las notas, pero no se expanden. Una variante necesita un selector o una media query alrededor de la declaración, así que envuélvelas a mano en tu hoja de estilos.