Cómo usar: CSS a Tailwind
- Pega reglas CSS (con selectores) o solo declaraciones.
- Revisa la lista de clases generada para cada selector.
- Copia las clases en tu HTML o JSX; revisa los valores arbitrarios y reemplázalos por tokens del tema cuando tenga sentido.
Cómo se mapean los valores
La escala de espaciado por defecto de Tailwind usa pasos de 0,25 rem (4 px), así que padding: 16px se convierte en p-4 y margin: 0 auto en my-0 mx-auto. Los valores que no están en la escala usan la sintaxis de valor arbitrario: padding: 13px → p-[13px]. La tipografía, los radios y los pesos se mapean a sus pasos con nombre:
| CSS | Tailwind |
|---|---|
display: flex; flex-direction: column | flex flex-col |
gap: 16px | gap-4 |
font-size: 24px; font-weight: 700 | text-2xl font-bold |
border-radius: 12px | rounded-xl |
background-color: #7c5cff | bg-[#7c5cff] |
width: 100% | w-full |
.btn:hover { color: #fff } | hover:text-white |
Limitaciones a tener en cuenta
- Los colores se convierten en valores arbitrarios; después, mapéalos a la paleta de tu tema (por ejemplo
bg-violet-500). La herramienta CSS variables to Tailwind te ayuda a definir un tema. - Las propiedades sin utilidad se escriben como propiedades arbitrarias:
[mask-image:url(...)]. - Las media queries, los selectores complejos y las animaciones necesitan traducción manual a
md:,group-hover:y la configuración del tema. !importantse convierte en el prefijo!.
Para valores puntuales, el generador de valores arbitrarios de Tailwind crea clases individuales, y el generador de colores de Tailwind crea paletas completas.
También se busca como: convertir css a tailwind, convertidor css tailwind, css a clases tailwind, generador tailwind css, migrar css a tailwind, convertir css a clases de tailwind, tailwind converter.
Herramientas que combinan con: CSS a Tailwind
- Convertidor PX a REM — Convierte entre píxeles, rem y em con tu propio tamaño de fuente raíz, o pega una hoja de estilos completa y convierte todos los valores px de una vez.
- Formateador de CSS — Convierte una hoja de estilos minificada en CSS legible, con una propiedad por línea y bloques @media correctamente anidados.
- Generador de animaciones CSS — Diseña animaciones CSS sobre una línea de tiempo real de keyframes.
- Generador de Keyframes CSS — Un editor visual para @keyframes.
Preguntas frecuentes
¿Es compatible con Tailwind v4?
Sí. Las utilidades generadas y los valores arbitrarios funcionan en Tailwind v3 y v4.
¿Por qué los colores se escriben como bg-[#hex]?
Los colores exactos se mantienen como valores arbitrarios para que nada cambie visualmente. Reemplázalos por los colores de tu tema cuando tengas una paleta.
¿Puede convertir media queries?
No automáticamente. Convierte por separado las reglas dentro de una media query y añade el prefijo responsive correcto, como
md:.¿Puedo instalar CSS a Tailwind como aplicación web y utilizarla sin conexión?
Sí. CSS a Tailwind es una aplicación web instalable (PWA): se instala desde el navegador, no se descarga desde una tienda de aplicaciones. Haz clic en «Instalar aplicación» en la parte superior de esta página en Chrome o Edge (Windows, macOS, Linux, ChromeOS) o, en Android, utiliza «Compartir» → «Añadir a la pantalla de inicio» en iPhone y iPad, o «Archivo» → «Añadir al Dock» en Safari 17+ en un Mac. A continuación, se abrirá en su propia ventana con su propio icono y, como se ejecuta íntegramente en tu navegador, seguirá funcionando sin conexión. Firefox en el ordenador de sobremesa no permite instalar aplicaciones web. Cómo funciona la instalación.