1. Primeros pasos
  2. CLI de Tailwind

Instalación

Primeros pasos con Tailwind CSS

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.

Instalación de Tailwind CLI

La forma más sencilla y rápida de empezar a utilizar Tailwind CSS desde cero es con la herramienta Tailwind CLI. La CLI también está disponible como un ejecutable independiente si deseas utilizarla sin instalar Node.js.

01

Instalar Tailwind CSS

Instala tailwindcss y @tailwindcss/cli a través de npm.

Terminal
npm install tailwindcss @tailwindcss/cli
02

Importar Tailwind en tu CSS

Añade la importación @import "tailwindcss"; a tu archivo CSS principal.

src/input.css
@import "tailwindcss";
03

Iniciar el proceso de compilación de Tailwind CLI

Ejecuta la herramienta CLI para escanear tus archivos de origen en busca de clases y compilar tu CSS.

Terminal
npx @tailwindcss/cli -i ./src/input.css -o ./src/output.css --watch
04

Comenzar a usar Tailwind en tu HTML

Añade tu archivo CSS compilado al <head> y comienza a usar las clases de utilidad de Tailwind para dar estilo a tu contenido.

src/index.html
<!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>
Copyright © 2026 Tailwind Labs Inc.·Política de marcas registradas