Tailwind CSS

Estiliza tu web con clases de utilidad directamente en tu HTML.

El problema de siempre

Imagina tu flujo de trabajo habitual. Quieres estilizar un botón:

Abres tu archivo HTML, escribes <button class="btn-primary-large-rounded">.
Abres tu archivo CSS, inventas el nombre .btn-primary-large-rounded.
Escribes background-color, color, padding, border-radius, font-weight, border, cursor… ocho propiedades.
Guardas, vuelves al HTML, verificas que se ve bien.
Repites este proceso 200 veces durante el proyecto.

Y cuando terminas, tienes un archivo CSS de 800 líneas lleno de clases con nombres que inventaste tú hace tres semanas y que ya no recuerdas del todo.

¿Y si pudieras estilizar directamente en el HTML, sin inventar nombres, sin cambiar de archivo, y con clases que ya existen listas para usar?

Eso es exactamente lo que hace Tailwind CSS.

1. ¿Qué es Tailwind CSS?

Tailwind es un framework de CSS con enfoque “utility-first” (utilidades primero). En lugar de escribir tu propio CSS, usas clases de utilidad predefinidas directamente en tu HTML.

Piénsalo así: CSS normal es como cocinar desde cero. Compras los ingredientes, sigues una receta, mides todo tú. Tailwind es como tener una cocina de restaurante donde los ingredientes ya están cortados, medidos y listos para combinar. Tú solo armas el plato.

Mira la diferencia en la práctica:

Con CSS tradicional:

<!-- HTML -->
<button class="btn-primary">Enviar</button>

/* CSS — en otro archivo */
.btn-primary {
  background-color: #22c55e;
  color: #000;
  padding: 0.75rem 2rem;
  border-radius: 8px;
  font-weight: 600;
  border: none;
  cursor: pointer;
}

Con Tailwind CSS:

<!-- Todo en el HTML, sin abrir otro archivo -->
<button class="bg-green-500 text-black px-8 py-3 rounded-lg font-semibold border-none cursor-pointer">
  Enviar
</button>

El resultado visual es exactamente el mismo. La diferencia está en el flujo de trabajo.

“¿Pero no es feo tener tantas clases?”

Es la pregunta que todo el mundo hace al ver Tailwind por primera vez, y es completamente válida. La respuesta honesta es: al principio sí se siente raro. Pero después de un par de días, descubres que:

No cambias de archivo constantemente. Tu contexto mental se mantiene en el HTML.
No inventas nombres. Nunca más te preguntas “¿cómo llamo a esta clase?”.
Es predecible. text-gray-400 siempre hace lo mismo en cualquier proyecto.
El CSS final es pequeño. Tailwind solo incluye las clases que usas.

No es para todo el mundo ni para todo proyecto, pero es la herramienta dominante en el ecosistema moderno (React, Next.js, Astro). Vale la pena aprenderla.

2. Instalación y configuración

La forma más limpia para proyectos nuevos. Crea el proyecto y luego instala Tailwind v4:

npm create vite@latest mi-proyecto -- --template vanilla
cd mi-proyecto
npm install

# Instalar Tailwind CSS v4 y el plugin para Vite
npm install tailwindcss @tailwindcss/vite

Luego configura vite.config.js para incluir el plugin:

import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [tailwindcss()],
})

En tu archivo CSS principal (normalmente style.css), reemplaza todo el contenido con esta sola línea:

@import "tailwindcss";

Arranca el servidor y listo:

npm run dev

Ahora cualquier clase de Tailwind que uses en tu HTML va a funcionar.

Si quieres experimentar sin configurar nada, el CDN es perfecto. Solo agrega una línea en el <head>:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mi página con Tailwind</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-900 text-gray-100">
  <h1 class="text-4xl font-bold text-center mt-10">¡Hola Tailwind!</h1>
</body>
</html>

Abre el archivo en el navegador y ya tienes Tailwind funcionando. Sin npm, sin configuración, sin nada.

Si ya estás trabajando con Astro (como en este mismo sitio), la integración oficial lo hace todo por ti:

npx astro add tailwind

El comando te va a preguntar si quieres que configure todo automáticamente. Di que sí. Astro instala las dependencias, actualiza la configuración y ya está listo.

A partir de ese momento, puedes usar clases de Tailwind en cualquier componente .astro, .jsx, .vue, o donde sea.

3. La caja de herramientas: clases de utilidad

Tailwind tiene cientos de clases, pero no necesitas memorizarlas todas. Aprende los patrones y el resto sale solo. Vamos grupo por grupo.

Colores

Los colores en Tailwind siguen una escala del 50 (más claro) al 950 (más oscuro). El patrón es siempre: {propiedad}-{color}-{intensidad}.

<!-- Color del texto -->
<p class="text-white">Texto blanco</p>
<p class="text-gray-400">Texto gris (el gris de los párrafos secundarios)</p>
<p class="text-green-500">Texto verde (el verde "brand" típico)</p>
<p class="text-blue-400">Texto azul</p>
<p class="text-red-500">Texto rojo (para errores)</p>

<!-- Color de fondo -->
<div class="bg-gray-950">Fondo muy oscuro (casi negro)</div>
<div class="bg-gray-900">Fondo oscuro (dark mode clásico)</div>
<div class="bg-gray-800">Fondo gris oscuro (para cards)</div>
<div class="bg-green-500">Fondo verde</div>
<div class="bg-transparent">Fondo transparente</div>

La escala completa: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950. El 500 suele ser el color “puro”, los números menores son más claros y los mayores más oscuros.

Colores disponibles: gray, red, orange, yellow, green, teal, blue, indigo, purple, pink, rose, y más.

Espaciado: padding y margin

El espaciado usa una escala numérica donde cada unidad equivale a 0.25rem (4px):

<!-- Padding (espacio interno) -->
<div class="p-4">padding: 1rem (16px) en todos los lados</div>
<div class="px-6 py-3">padding horizontal 1.5rem, vertical 0.75rem</div>
<div class="pt-8">padding-top: 2rem</div>
<div class="pb-4">padding-bottom: 1rem</div>

<!-- Margin (espacio externo) -->
<div class="m-4">margin: 1rem en todos los lados</div>
<div class="mt-8">margin-top: 2rem</div>
<div class="mb-6">margin-bottom: 1.5rem</div>
<div class="mx-auto">margin horizontal auto (centra el elemento)</div>
<div class="my-12">margin vertical: 3rem</div>

Los prefijos de dirección:

Sin prefijo: todos los lados (p-4, m-4)
x: horizontal (izquierda + derecha)
y: vertical (arriba + abajo)
t: top (arriba)
b: bottom (abajo)
l: left (izquierda)
r: right (derecha)

La escala de tamaños más usada: 0, 1 (4px), 2 (8px), 3 (12px), 4 (16px), 5 (20px), 6 (24px), 8 (32px), 10 (40px), 12 (48px), 16 (64px), 20 (80px), 24 (96px).

Tipografía

<!-- Tamaño de texto -->
<p class="text-xs">Texto extra pequeño (12px)</p>
<p class="text-sm">Texto pequeño (14px)</p>
<p class="text-base">Texto base (16px)</p>
<p class="text-lg">Texto grande (18px)</p>
<p class="text-xl">Extra grande (20px)</p>
<p class="text-2xl">2x extra grande (24px)</p>
<p class="text-4xl">4x extra grande (36px)</p>
<p class="text-6xl">6x extra grande (60px)</p>

<!-- Peso de la fuente -->
<p class="font-thin">Muy delgada</p>
<p class="font-normal">Normal</p>
<p class="font-medium">Medio</p>
<p class="font-semibold">Semi-negrita</p>
<p class="font-bold">Negrita</p>
<p class="font-extrabold">Extra negrita</p>

<!-- Alineación y estilo -->
<h1 class="text-4xl font-bold text-center">Título centrado y bold</h1>
<p class="text-base leading-relaxed">Párrafo con interlineado cómodo</p>
<p class="text-sm text-gray-400">Texto secundario pequeño y gris</p>
<p class="uppercase tracking-wider font-semibold text-xs">ETIQUETA ESPACIADA</p>
<p class="italic">Texto en cursiva</p>
<p class="line-through">Texto tachado</p>
<p class="underline">Texto subrayado</p>

Bordes y esquinas redondeadas

<!-- Bordes -->
<div class="border">Borde con el color por defecto (1px solid)</div>
<div class="border border-gray-700">Borde gris oscuro</div>
<div class="border-2 border-green-500">Borde verde de 2px</div>
<div class="border-l-4 border-green-500">Solo borde izquierdo verde de 4px</div>

<!-- Esquinas redondeadas -->
<div class="rounded">Redondeado pequeño (4px)</div>
<div class="rounded-md">Redondeado medio (6px)</div>
<div class="rounded-lg">Redondeado grande (8px)</div>
<div class="rounded-xl">Redondeado extra (12px)</div>
<div class="rounded-2xl">Redondeado 2x (16px)</div>
<div class="rounded-full">Completamente circular</div>

<!-- Combinación típica para cards -->
<div class="border border-gray-800 rounded-xl bg-gray-900">
  Una card con borde, esquinas redondeadas y fondo oscuro
</div>

<!-- Avatar circular -->
<img class="rounded-full w-12 h-12 object-cover" src="avatar.jpg" alt="Avatar" />

Dimensiones

<!-- Ancho -->
<div class="w-full">Ancho 100% del contenedor</div>
<div class="w-1/2">Ancho 50%</div>
<div class="w-1/3">Ancho 33%</div>
<div class="w-64">Ancho fijo: 16rem (256px)</div>
<div class="w-screen">Ancho de toda la ventana</div>
<div class="max-w-sm">Ancho máximo pequeño (384px)</div>
<div class="max-w-md">Ancho máximo medio (448px)</div>
<div class="max-w-lg">Ancho máximo grande (512px)</div>
<div class="max-w-2xl">Ancho máximo 2x (672px)</div>
<div class="max-w-4xl mx-auto">Contenido centrado con ancho máximo</div>

<!-- Alto -->
<div class="h-4">Alto fijo: 1rem</div>
<div class="h-screen">Alto de toda la ventana</div>
<div class="min-h-screen">Mínimo el alto de la ventana</div>

4. Flexbox y Grid con Tailwind

Todo lo que aprendiste sobre Flexbox y Grid en los capítulos anteriores aplica aquí, solo con clases en lugar de propiedades CSS.

Flexbox

<!-- Centrar algo perfectamente en la pantalla -->
<div class="flex justify-center items-center min-h-screen">
  <p class="text-xl">Centrado perfecto, horizontal y vertical</p>
</div>

<!-- Navbar clásico: logo a la izquierda, links a la derecha -->
<nav class="flex justify-between items-center px-6 py-4 bg-gray-900">
  <a href="/" class="text-xl font-bold text-green-400">MiSitio</a>
  <div class="flex gap-6">
    <a href="#" class="text-gray-400 hover:text-white transition-colors">Inicio</a>
    <a href="#" class="text-gray-400 hover:text-white transition-colors">Blog</a>
    <a href="#" class="text-gray-400 hover:text-white transition-colors">Contacto</a>
  </div>
</nav>

<!-- Lista horizontal de tags/badges -->
<div class="flex flex-wrap gap-2">
  <span class="bg-gray-800 text-green-400 px-3 py-1 rounded-full text-sm">HTML</span>
  <span class="bg-gray-800 text-green-400 px-3 py-1 rounded-full text-sm">CSS</span>
  <span class="bg-gray-800 text-green-400 px-3 py-1 rounded-full text-sm">JavaScript</span>
</div>

<!-- Columna: elementos apilados con espacio entre ellos -->
<div class="flex flex-col gap-4">
  <div class="bg-gray-800 p-4 rounded-lg">Item 1</div>
  <div class="bg-gray-800 p-4 rounded-lg">Item 2</div>
  <div class="bg-gray-800 p-4 rounded-lg">Item 3</div>
</div>

La traducción de propiedades CSS a clases Tailwind:

CSS	Tailwind
`display: flex`	`flex`
`flex-direction: column`	`flex-col`
`justify-content: center`	`justify-center`
`justify-content: space-between`	`justify-between`
`align-items: center`	`items-center`
`flex-wrap: wrap`	`flex-wrap`
`gap: 1rem`	`gap-4`

Grid

<!-- Grid de tarjetas, 3 columnas iguales -->
<div class="grid grid-cols-3 gap-6">
  <div class="bg-gray-800 p-6 rounded-lg">Card 1</div>
  <div class="bg-gray-800 p-6 rounded-lg">Card 2</div>
  <div class="bg-gray-800 p-6 rounded-lg">Card 3</div>
</div>

<!-- Layout con sidebar y contenido principal -->
<div class="grid grid-cols-[250px_1fr] gap-8">
  <aside class="bg-gray-900 p-4 rounded-lg">Sidebar</aside>
  <main class="bg-gray-900 p-4 rounded-lg">Contenido principal</main>
</div>

<!-- Grid auto-ajustable: cada card mínimo 280px -->
<div class="grid grid-cols-[repeat(auto-fill,minmax(280px,1fr))] gap-6">
  <div class="bg-gray-800 p-6 rounded-xl">Card auto</div>
  <div class="bg-gray-800 p-6 rounded-xl">Card auto</div>
  <div class="bg-gray-800 p-6 rounded-xl">Card auto</div>
</div>

CSS	Tailwind
`display: grid`	`grid`
`grid-template-columns: repeat(3, 1fr)`	`grid-cols-3`
`gap: 1.5rem`	`gap-6`
`grid-column: span 2`	`col-span-2`

5. Diseño responsive con Tailwind

Aquí es donde Tailwind brilla de verdad. El responsive design que antes requería media queries en CSS se convierte en prefijos de clase directamente en el HTML.

Los breakpoints disponibles:

Prefijo	Tamaño mínimo	Dispositivo típico
(sin prefijo)	0px	Móvil (y todos los tamaños)
`sm:`	640px	Teléfono grande
`md:`	768px	Tablet
`lg:`	1024px	Laptop
`xl:`	1280px	Desktop
`2xl:`	1536px	Pantallas grandes

Ejemplos en acción:

<!-- Grid: 1 columna en móvil, 2 en tablet, 3 en desktop -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  <div class="bg-gray-800 p-6 rounded-lg">Card 1</div>
  <div class="bg-gray-800 p-6 rounded-lg">Card 2</div>
  <div class="bg-gray-800 p-6 rounded-lg">Card 3</div>
</div>

<!-- Título: pequeño en móvil, grande en desktop -->
<h1 class="text-2xl lg:text-5xl font-bold text-center lg:text-left">
  Título responsive
</h1>

<!-- Padding: poco en móvil, más en desktop -->
<section class="px-4 md:px-8 lg:px-16 py-12 lg:py-24">
  Contenido con más respiro en pantallas grandes
</section>

<!-- Sidebar: oculto en móvil, visible en desktop -->
<aside class="hidden lg:block w-64 bg-gray-900 p-4">
  Sidebar solo visible en desktop
</aside>

<!-- Botón: ancho completo en móvil, auto en desktop -->
<button class="w-full md:w-auto bg-green-500 text-black px-8 py-3 rounded-lg font-semibold">
  Acción principal
</button>

Mobile-first en Tailwind

Las clases sin prefijo aplican a todos los tamaños de pantalla, desde el más pequeño. Los prefijos como md: y lg: aplican desde ese breakpoint hacia arriba, no solo en ese tamaño.

Así que text-sm md:text-base lg:text-xl significa:

Móvil: text-sm
Tablet (768px+): text-base
Desktop (1024px+): text-xl

Siempre diseña primero para móvil, luego agrega prefijos para pantallas más grandes.

6. Estados: hover, focus, active

Los estados interactivos funcionan exactamente igual que los breakpoints: con prefijos antes de la clase.

<!-- Botón con hover y click effect -->
<button class="bg-green-500 hover:bg-green-600 active:scale-95 transition-all duration-200 text-black px-6 py-3 rounded-lg font-semibold cursor-pointer">
  Hovéame
</button>

<!-- Input con focus visible -->
<input
  type="text"
  placeholder="Escribe algo..."
  class="bg-gray-800 border border-gray-700 text-gray-100 px-4 py-2 rounded-lg
         focus:border-green-500 focus:ring-2 focus:ring-green-500/20 outline-none
         transition-all duration-200 w-full"
/>

<!-- Enlace de navegación -->
<a href="#" class="text-gray-400 hover:text-white hover:underline transition-colors duration-200">
  Enlace con transición suave
</a>

<!-- Card que se eleva al hover -->
<article class="bg-gray-900 border border-gray-800 rounded-xl p-6
                hover:-translate-y-1 hover:border-green-500/30 hover:shadow-lg
                transition-all duration-300 cursor-pointer">
  Tarjeta que se eleva al pasar el mouse
</article>

<!-- Ícono que rota al hover -->
<button class="flex items-center gap-2 text-gray-400 hover:text-green-400 transition-colors group">
  Ver más
  <span class="group-hover:translate-x-1 transition-transform duration-200">→</span>
</button>

Los prefijos de estado más comunes:

Prefijo	Cuándo aplica
`hover:`	Al pasar el mouse
`focus:`	Al hacer foco (teclado o click)
`active:`	Al hacer click (mientras se mantiene)
`disabled:`	Cuando el elemento está deshabilitado
`group-hover:`	Cuando el padre con clase `group` tiene hover
`first:`	Al primer hijo del elemento
`last:`	Al último hijo del elemento

7. Personalizar Tailwind

Tailwind viene con una paleta y escala de valores por defecto, pero puedes personalizarlo completamente.

Variables de tema (Tailwind v4)

En Tailwind v4, la personalización se hace directamente en CSS con @theme:

@import "tailwindcss";

@theme {
  /* Colores personalizados */
  --color-primary: #00ff41;
  --color-primary-dark: #00cc33;
  --color-bg: #0a0a0f;
  --color-surface: #1a1a2e;

  /* Tipografía */
  --font-sans: 'Inter', sans-serif;
  --font-mono: 'Fira Code', monospace;

  /* Otros */
  --radius-brand: 12px;
}

Después de definirlos, puedes usar esas variables como clases normales de Tailwind:

<body class="bg-bg font-sans">
  <h1 class="text-primary">Título con tu color principal</h1>
  <button class="bg-primary hover:bg-primary-dark text-bg rounded-brand px-6 py-3">
    Botón personalizado
  </button>
</body>

Valores arbitrarios (cuando el estándar no alcanza)

Si necesitas un valor específico que no existe en la escala de Tailwind, usa corchetes:

<!-- Valor de color exacto -->
<div class="bg-[#0a0a0f] text-[#00ff41]">Tu paleta exacta</div>

<!-- Padding personalizado -->
<div class="p-[1.75rem]">Padding de 1.75rem</div>

<!-- Grid con columnas específicas -->
<div class="grid grid-cols-[250px_1fr_300px]">
  <aside>Sidebar fijo</aside>
  <main>Contenido flexible</main>
  <aside>Panel derecho fijo</aside>
</div>

<!-- Altura específica -->
<div class="h-[calc(100vh-64px)]">Altura de ventana menos el header</div>

<!-- Color con opacidad -->
<div class="bg-green-500/20 text-green-400">Fondo con 20% de opacidad</div>

8. Ejemplo práctico: landing page con Tailwind

Vamos a construir la landing page de FocusFlow (la misma del capítulo 8) pero ahora enteramente con Tailwind. Sin abrir un archivo CSS.

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>FocusFlow — Tu tiempo merece enfoque</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="bg-gray-950 text-gray-100 font-sans antialiased">

  <!-- Header -->
  <header class="sticky top-0 z-50 flex justify-between items-center
                 px-6 py-4 bg-gray-900/80 backdrop-blur-sm
                 border-b border-gray-800">
    <a href="/" class="text-xl font-bold text-green-400 tracking-tight">
      FocusFlow
    </a>
    <nav class="flex items-center gap-6">
      <a href="#features" class="text-gray-400 hover:text-blue-400 transition-colors text-sm">
        Features
      </a>
      <a href="#pricing" class="text-gray-400 hover:text-blue-400 transition-colors text-sm">
        Precios
      </a>
      <a href="#" class="bg-green-500 text-black px-4 py-1.5 rounded-lg text-sm font-semibold
                         hover:bg-green-400 transition-colors">
        Empezar gratis
      </a>
    </nav>
  </header>

  <!-- Hero -->
  <section class="text-center py-20 px-6 max-w-3xl mx-auto">
    <span class="inline-block bg-green-500/10 text-green-400 text-xs font-semibold
                 px-3 py-1 rounded-full uppercase tracking-wider mb-6">
      Nuevo — Versión 2.0
    </span>
    <h1 class="text-4xl lg:text-6xl font-extrabold mb-6 leading-tight tracking-tight">
      Tu tiempo merece
      <span class="text-green-400"> enfoque</span>
    </h1>
    <p class="text-gray-400 text-lg mb-10 max-w-md mx-auto leading-relaxed">
      Elimina las distracciones. Completa lo que importa.
      Toma el control de cada minuto de tu día.
    </p>
    <div class="flex flex-col sm:flex-row gap-4 justify-center">
      <a href="#" class="inline-block bg-green-500 text-black px-8 py-3.5 rounded-lg
                         font-semibold hover:shadow-lg hover:shadow-green-500/30
                         hover:-translate-y-0.5 transition-all duration-200">
        Empieza gratis — es gratis de verdad
      </a>
      <a href="#features" class="inline-block border border-gray-700 text-gray-300
                                  px-8 py-3.5 rounded-lg font-semibold
                                  hover:border-gray-500 hover:text-white transition-all">
        Ver demo
      </a>
    </div>
    <p class="text-gray-600 text-xs mt-4">
      Sin tarjeta de crédito. Sin letra chica.
    </p>
  </section>

  <!-- Features -->
  <section id="features" class="py-20 px-6">
    <div class="max-w-5xl mx-auto">
      <h2 class="text-2xl lg:text-3xl font-bold text-center mb-4">
        Todo lo que necesitas para ser más productivo
      </h2>
      <p class="text-gray-400 text-center mb-12 max-w-xl mx-auto">
        No añadimos features por añadir. Cada función existe para ayudarte a trabajar mejor.
      </p>

      <div class="grid grid-cols-1 md:grid-cols-3 gap-6">

        <article class="bg-gray-900 border border-gray-800 rounded-xl p-6
                        hover:-translate-y-1 hover:border-green-500/30
                        transition-all duration-300">
          <span class="text-3xl block mb-4">⏱️</span>
          <h3 class="font-semibold text-lg mb-2">Temporizador Pomodoro</h3>
          <p class="text-gray-400 text-sm leading-relaxed">
            Bloques de 25 minutos con descansos inteligentes. Tu cerebro te lo agradecerá.
          </p>
        </article>

        <article class="bg-gray-900 border border-gray-800 rounded-xl p-6
                        hover:-translate-y-1 hover:border-blue-500/30
                        transition-all duration-300">
          <span class="text-3xl block mb-4">📋</span>
          <h3 class="font-semibold text-lg mb-2">Tareas priorizadas</h3>
          <p class="text-gray-400 text-sm leading-relaxed">
            No todos los pendientes son iguales. Organiza por impacto, no por urgencia falsa.
          </p>
        </article>

        <article class="bg-gray-900 border border-gray-800 rounded-xl p-6
                        hover:-translate-y-1 hover:border-purple-500/30
                        transition-all duration-300">
          <span class="text-3xl block mb-4">📊</span>
          <h3 class="font-semibold text-lg mb-2">Estadísticas semanales</h3>
          <p class="text-gray-400 text-sm leading-relaxed">
            Visualiza tus patrones de productividad y descubre cuándo rindes más.
          </p>
        </article>

      </div>
    </div>
  </section>

  <!-- CTA Final -->
  <section class="py-20 px-6 text-center border-t border-gray-800">
    <h2 class="text-2xl lg:text-4xl font-bold mb-4">
      ¿Listo para recuperar tu tiempo?
    </h2>
    <p class="text-gray-400 mb-8">Únete a más de 12,000 personas que ya trabajan con más enfoque.</p>
    <a href="#" class="inline-block bg-green-500 text-black px-10 py-4 rounded-xl
                       font-bold text-lg hover:shadow-xl hover:shadow-green-500/20
                       hover:-translate-y-1 transition-all duration-300">
      Empezar ahora — gratis
    </a>
  </section>

  <!-- Footer -->
  <footer class="border-t border-gray-800 py-8 px-6">
    <div class="max-w-5xl mx-auto flex flex-col md:flex-row justify-between items-center gap-4">
      <p class="text-green-400 font-bold">FocusFlow</p>
      <p class="text-gray-600 text-sm">
        © 2025 FocusFlow. Hecho con Tailwind CSS y mucho enfoque.
      </p>
      <div class="flex gap-6 text-sm text-gray-600">
        <a href="#" class="hover:text-gray-400 transition-colors">Privacidad</a>
        <a href="#" class="hover:text-gray-400 transition-colors">Términos</a>
      </div>
    </div>
  </footer>

</body>
</html>

Compara esto con la versión del capítulo 8: mismo resultado visual, pero cero líneas de CSS personalizado. El archivo CSS que generó Tailwind solo incluye las clases que usamos, y pesa muy poco.

9. ¿CSS normal, SCSS o Tailwind?

Ya que has aprendido los tres enfoques a lo largo de este libro, es buen momento para poner todo en perspectiva:

Aspecto	CSS normal	SCSS	Tailwind
Curva de aprendizaje	Baja	Media	Media
Velocidad de desarrollo	Normal	Rápida	Muy rápida
Archivo CSS final	Manual	Compilado	Auto-generado
Reutilización de estilos	Clases manuales	Mixins / Extend	Utility classes
Personalización	Total	Total	Configurable
Legibilidad del HTML	Alta	Alta	Puede saturarse
Mejor para	Aprender los fundamentos	Proyectos medianos con equipo	Proyectos modernos con frameworks

Pro tip

No hay un “mejor” absoluto — depende del contexto. CSS es la base que necesitas dominar sin importar qué uses después. SCSS es ideal para proyectos que necesitan organización y equipos que ya conocen CSS. Tailwind brilla en equipos y proyectos modernos con frameworks como React, Next.js o Astro.

La mayoría de los devs profesionales manejan los tres. Aprender el siguiente no borra el anterior: se complementan.

Resumen

Lo que aprendiste en este capítulo:

Utility-first CSS: Tailwind reemplaza el CSS escrito a mano con clases de utilidad predefinidas directamente en el HTML.
No más nombres de clases inventados: bg-green-500, px-6, rounded-lg son universales y predecibles.
La escala de colores: del 50 (claro) al 950 (oscuro), con patrones consistentes para texto (text-), fondo (bg-) y bordes (border-).
La escala de espaciado: cada unidad = 0.25rem (4px). p-4 = padding: 1rem.
Responsive con prefijos: sm:, md:, lg:, xl: aplican desde ese breakpoint hacia arriba. Mobile-first por diseño.
Estados interactivos: hover:, focus:, active:, group-hover: como prefijos de clase.
Flexbox y Grid: las mismas propiedades CSS que aprendiste, ahora como clases (flex, grid, justify-center, items-center, gap-6).
Personalización: @theme en CSS para definir tus propios tokens. Corchetes [] para valores arbitrarios.
Instalación: Vite + @tailwindcss/vite para proyectos nuevos, CDN para prototipos, npx astro add tailwind para Astro.

Recursos adicionales

Para explorar todas las clases disponibles y la documentación oficial:

Documentación de Tailwind CSS — La referencia completa, con buscador por propiedad CSS.
Tailwind CSS Cheat Sheet — Referencia rápida de todas las clases.

Ejercicio: Recrea la landing page con Tailwind

Toma la landing page FocusFlow que construiste en el capítulo 8 y recréala usando solo clases de Tailwind (sin ningún archivo CSS separado).

Crea un proyecto con Vite + Tailwind (o usa el CDN para probar rápido, añade el <script src="https://cdn.tailwindcss.com"> en el <head>)
Reproduce el header con flex, justify-between, items-center, fondo oscuro y border-bottom
Reproduce el hero con texto centrado, título grande responsive (text-2xl lg:text-5xl) y botón call-to-action
Reproduce las feature cards con grid responsive: 1 columna en móvil, 3 en desktop
Reproduce el formulario de suscripción con estilos de input: borde, focus ring, rounded
Agrega hover effects al botón (hover:bg-green-600) y a las cards (hover:-translate-y-1)
Agrega transitions suaves (transition-all duration-200) a los elementos interactivos
Comprueba el resultado en móvil y en desktop
Cuenta las líneas de CSS que escribiste — debería ser cero

Bonus: Experimenta cambiando colores usando valores arbitrarios (bg-[#tu-color]) para que la página refleje tu propia paleta en lugar de la de FocusFlow.

Siguiente capítuloProyecto finalAplica todo lo aprendido: construye una landing page completa y responsive.