¿Esto cubre todas las clases Tailwind?

Cubre las clases de utilidad más comunes (100+). Los valores de tema personalizados y valores arbitrarios complejos pueden no convertirse perfectamente.

¿Qué hay de las clases de color?

Las clases de color (text-blue-500, bg-red-200) se muestran como comentarios ya que los valores reales dependen de tu configuración de tema Tailwind.

¿Puedo pegar una cadena className completa?

Sí. Pega clases separadas por espacios como 'flex items-center p-4 text-sm font-bold' y cada una se convertirá a su equivalente CSS.

Herramienta para Desarrolladores

Conversor de Tailwind a CSS

Convierte clases de Tailwind CSS a sus equivalentes en CSS vanilla.

100% gratis — no se necesita cuenta

Clases Tailwind

clases convertidas: 7/7

Tailwind

flex

items-center

justify-between

p-4

rounded-lg

bg-white

shadow-md

CSS

display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem;
border-radius: 0.5rem;
/* bg-white: theme-dependent color */
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);

Tailwind → CSS Vanilla

Entiende qué hacen tus clases Tailwind

100+ Clases

Soporta espaciado, dimensionado, texto, flex, grid, display, borde y más.

Patrones Dinámicos

Maneja valores dinámicos como p-4, m-2, w-1/2, text-xl con cálculo apropiado.

Soporte de Prefijos

Reconoce prefijos responsivos (md:, lg:) y de estado (hover:, focus:).

Copiar CSS

Copia con un clic la salida CSS vanilla generada.

FAQ

Herramientas para Desarrolladores

Más utilidades CSS

Gradiente CSS, box shadow, playground flexbox y más.