1. Primeros Pasos
  2. Tailwind CLI

Instalación

Empieza 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.

Instalando Tailwind CLI

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.

01

Instala Tailwind CSS

Instala tailwindcss y @tailwindcss/cli vía npm.

Terminal
npm install tailwindcss @tailwindcss/cli
02

Importa Tailwind en tu CSS

Agrega la importación @import "tailwindcss"; a tu archivo CSS principal.

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

Inicia el proceso de compilación de Tailwind CLI

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

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

Empieza a usar Tailwind en tu HTML

Agrega tu archivo CSS compilado al <head> y comienza a usar las clases de utilidad de Tailwind para estilizar 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 © 2025 Tailwind Labs Inc.·Política de Marca Registrada