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.
La forma más simple y rápida de empezar a usar Tailwind CSS desde cero es con la herramienta Tailwind CLI. La CLI también está disponible como un ejecutable independiente si quieres usarla sin instalar Node.js.
Instala tailwindcss
y @tailwindcss/cli
vía npm.
npm install tailwindcss @tailwindcss/cli
Agrega la importación @import "tailwindcss";
a tu archivo CSS principal.
@import "tailwindcss";
Ejecuta la herramienta CLI para escanear tus archivos fuente en busca de clases y compilar tu CSS.
npx @tailwindcss/cli -i ./src/input.css -o ./src/output.css --watch
Agrega tu archivo CSS compilado al <head>
y comienza a usar las clases de utilidad de Tailwind para estilizar tu contenido.
<!doctype html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="./output.css" rel="stylesheet"></head><body> <h1 class="text-3xl font-bold underline"> Hello world! </h1></body></html>