Instalación
Tailwind CSS funciona escaneando todos tus archivos HTML, componentes de JavaScript y cualquier otra plantilla en busca de nombres de clases, generando los estilos correspondientes y luego escribiéndolos en un archivo CSS estático.
Es rápido, flexible y confiable, sin tiempo de ejecución.
Usa la CDN de prueba (Play CDN) para probar Tailwind directamente en el navegador sin ningún paso de compilación. Play CDN está diseñada únicamente para fines de desarrollo y no está pensada para producción.
Añade la etiqueta del script de Play CDN al <head> de tu archivo HTML y comienza a usar las clases de utilidad de Tailwind para dar estilo a tu contenido.
<!doctype html><html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script> </head> <body> <h1 class="text-3xl font-bold underline"> Hello world! </h1> </body></html>Usa type="text/tailwindcss" para añadir CSS personalizado compatible con todas las características de CSS de Tailwind.
<!doctype html><html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script> <style type="text/tailwindcss"> @theme { --color-clifford: #da373d; } </style> </head> <body> <h1 class="text-3xl font-bold underline text-clifford"> Hello world! </h1> </body></html>