CSS a Tailwind
Convierte código CSS a clases Tailwind CSS. Pega tu CSS y obtén las clases Tailwind al instante.
⚠️ Propiedades no soportadas ()
ℹ️ Acerca de CSS a Tailwind
Pega un conjunto de reglas CSS y este conversor devuelve las clases de utilidad de Tailwind equivalentes, agrupadas bajo cada selector. Compara las declaraciones con las escalas por defecto de Tailwind —espaciado, de text-xs a text-9xl, rounded-lg, gray-700 y demás— y recurre a valores arbitrarios como p-[13px] cuando no encuentra coincidencia, además de listar las declaraciones que no ha podido convertir. Resulta útil al migrar a Tailwind una hoja de estilos antigua o un componente heredado. El análisis ocurre en tu navegador; el CSS no se sube en ningún momento.
💡 Casos de uso
📋 Cómo usar
Pega una regla CSS o un bloque entero de declaraciones en el cuadro CSS de la izquierda, o haz clic en Ejemplo para cargar una muestra.
Verás cómo el panel Tailwind CSS de la derecha se rellena mientras escribes, asignando a cada propiedad y valor su clase de utilidad.
Revisa el resultado selector a selector: cada regla aparece como un comentario de cabecera seguido de la lista de clases que puedes pegar en un atributo class.
Abre el cuadro amarillo Propiedades no compatibles para ver las declaraciones sin equivalente en Tailwind, indicadas con su selector, y resolverlas a mano.
Haz clic en Copiar para llevar las clases generadas al portapapeles.
Haz clic en Borrar para vaciar los dos paneles antes de pegar el siguiente bloque de CSS.
💎 Consejos Pro
- Pega tu contenido directamente: el conversor de CSS a Tailwind detecta los patrones de entrada más habituales y aplica valores por defecto razonables de forma automática.
- Usa los atajos de teclado (Ctrl/Cmd+A para seleccionar todo, Ctrl/Cmd+C para copiar) y agiliza tu trabajo dentro del conversor de CSS a Tailwind.
- Si la entrada es muy grande, divídela en partes: la mayoría de pestañas del navegador aguantan megabytes de texto, pero analizar cargas enormes puede bloquear la interfaz unos instantes.
- El conversor de CSS a Tailwind no registra ni almacena lo que introduces. Si necesitas un historial, copia los resultados importantes en un archivo local o en tu app de notas.
- Combina el conversor de CSS a Tailwind con otras herramientas de esta web (formateadores, conversores, codificadores) para montar flujos de datos completos sin salir del navegador.
❓ Preguntas frecuentes
Sí, es totalmente gratuito: sin registro, sin clave de API, sin marcas de agua y sin límites de uso.
No. El conversor de CSS a Tailwind funciona íntegramente en el lado del cliente, dentro de tu navegador. Lo que introduces nunca pasa por nuestros servidores.
No hay un límite fijo, pero por encima de unos pocos megabytes notarás cierta lentitud, según la memoria de tu dispositivo.
Sí. Los resultados generados con el conversor de CSS a Tailwind son tuyos y puedes usarlos libremente en cualquier proyecto personal o comercial.
Casi toda la lógica se ejecuta en JavaScript del lado del cliente, así que después de la carga inicial normalmente puedes seguir trabajando sin conexión a la red.
Ninguno. Como el conversor de CSS a Tailwind se ejecuta en tu navegador, puedes procesar tantas entradas como permita tu hardware, sin claves de API ni restricciones de velocidad.