Desarrollador

Convertidor de Tailwind a CSS Gratis

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

100% gratis — no se necesita cuenta

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);

Funciones de Convertidor de Tailwind a CSS Gratis

Entiende qué hacen tus clases Tailwind

Patrones Dinámicos

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

100+ Clases

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

Copiar CSS

Copia con un clic la salida CSS vanilla generada.

Soporte de Prefijos

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

Preguntas frecuentes

¿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.

¿Te gustan nuestras herramientas gratuitas?

Más utilidades CSS

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