¿Odias los anuncios? Ir Sin publicidad Hoy 

Convertidor de clases de Tailwind CSS a CSS plano

DesarrolladorTexto

ANUNCIO · ¿ELIMINAR?

APORTE

Proceso automático

PROD.

Lado cliente

ANUNCIO · ¿ELIMINAR?

Guía

Conversor de clases de Tailwind CSS a CSS puro

Convertidor de clases de Tailwind CSS a CSS plano

Pega una cadena de clases de utilidad de Tailwind v3 y obtén inmediatamente la regla de CSS correspondiente. Cada clase de Tailwind se expande a su declaración exacta de CSS con los valores correctos de rem, px y color extraídos de los tokens de diseño oficiales — sin suposiciones, sin redondeos.

Útil al migrar un componente de Tailwind a CSS puro, cuando deseas inspeccionar las declaraciones subyacentes o cuando necesitas entregar CSS manualmente sin el paso de compilación de Tailwind.

Cómo Usar

Pega tu cadena de clases de Tailwind en el cuadro de entrada (por ejemplo: flex items-center gap-4 p-6 bg-blue-500).
Opcionalmente cambia el selector — el valor por defecto es .element.
Lee el CSS generado en el panel de salida. Las variantes responsivas (md:, lg:…) están envueltas en @media consultas; las variantes de estado (hover:, focus:…) generan sus propios selectores.
Copia el resultado o descárgalo como un .css archivo.

Características

Escala completa de espaciado – Cada valor de margen, padding, gap, ancho y alto de Tailwind se resuelve en la salida canónica en rem o px.
Paleta completa de colores – Todas las 22 familias de colores con tonos 50–950 se mapean a sus códigos hex exactos para texto, fondo, borde, relleno y trazo.
Variantes responsivas – sm:, md:, lg:, xl:y 2xl: se emiten como bloques adecuados @media (min-width: ...) .
Variantes de estado – hover:, focus:, active:, disabled:, group-hover:, peer-focus:, dark:, before:, after: y más se convierten en selectores reales de CSS o consultas de medias.
Valores arbitrarios – La sintaxis de corchetes como w-[37rem] o bg-[#abc123] se pasa directamente a la declaración correspondiente.
Utilidades negativas – Formas con guion inicial como -mt-4 producen los valores negativos correctos en rem.
Selector personalizado – Elige cualquier selector para envolver la regla de salida (.card, #hero, etc.).
Copiar y descargar – Un clic para copiar el CSS o guardarlo como un archivo.

ANUNCIO · ¿ELIMINAR?

 Preguntas frecuentes

¿Cuál es la diferencia entre CSS de utilidades primero y CSS basado en componentes?

El CSS de utilidades primero proporciona clases de propósito único (por ejemplo, flex, p-4, text-center) que se mapean a una sola declaración de CSS, por lo que el estilo se aplica directamente en el marcado. El CSS basado en componentes agrupa muchas declaraciones bajo nombres semánticos (por ejemplo, .card, .button) que describen al elemento en lugar de sus visualizaciones. El enfoque de utilidades primero cambia el tamaño del HTML por átomos predecibles y reutilizables; el enfoque basado en componentes cambia el tamaño de los archivos de estilo por abstracciones de nivel superior.
¿Cómo se relaciona la escala de espaciado de Tailwind con las unidades rem?

La escala de espaciado predeterminada de Tailwind es un multiplicador sobre una base de 0.25rem, donde 1rem equivale a 16px en un navegador por defecto. Así, p-4 se resuelve en padding: 1rem (16px), p-2 es 0.5rem (8px) y p-6 es 1.5rem (24px). Las excepciones son spacing-0 (0px) y spacing-px (1px), que omiten la unidad rem para que puedas colocar bordes o espacios perfectos en píxeles sin realizar cálculos.
¿Por qué los marcos de utilidades responsivas usan por defecto consultas de ancho mínimo?

Los marcos móviles primero como Tailwind utilizan consultas de ancho mínimo para que las estilos básicos se apliquen en la ventana más pequeña y se mejoren progresivamente en pantallas más grandes. Esto coincide con la forma en que los navegadores móviles renderizan antes de conocer la configuración final, evita el flash de estilo incorrecto en conexiones lentas y permite que cada punto de ruptura sobrescriba solo lo que cambia, manteniendo el cascado aditivo en lugar de sustractivo.