Tailwind CSS Tutorial: Guía Completa en Español

Tailwind CSS ha cambiado la forma en que muchos desarrolladores escribimos CSS. En lugar de crear clases como .card-header o .btn-primary, usas clases utilitarias directamente en tu HTML: p-4 bg-blue-500 text-white rounded-lg. Suena extraño al principio, pero una vez que lo pruebas, la velocidad de desarrollo es difícil de superar.

Uso Tailwind en todos mis proyectos desde hace más de 2 años — tanto en este blog como en aplicaciones empresariales con Laravel y React. En esta guía te enseño los fundamentos y los patrones que más uso en el día a día.

¿Por qué Tailwind CSS?

Antes de Tailwind, el flujo típico era: escribir HTML, luego ir al archivo CSS, inventar un nombre de clase, escribir los estilos, volver al HTML. Con Tailwind, todo se hace en el mismo archivo. Las ventajas principales:

• No inventas nombres de clases: Se acabó el debate entre .card-wrapper y .card-container.
• CSS que no crece: En proyectos tradicionales, el CSS solo crece. Con Tailwind, el bundle final solo incluye las clases que usas (gracias al tree-shaking).
• Diseño consistente: El sistema de espaciado, colores y tamaños está predefinido y es consistente en toda la aplicación.
• Responsive design integrado: Prefijos como md: y lg: hacen el responsive trivial.
• Dark mode sin esfuerzo: El prefijo dark: maneja todo.

Instalación

Con Vite (recomendado para proyectos nuevos)

# Crear proyecto con Vite
npm create vite@latest mi-proyecto -- --template vanilla
cd mi-proyecto

# Instalar Tailwind CSS
npm install -D tailwindcss @tailwindcss/vite

Agrega el plugin de Tailwind en vite.config.js:

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

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

Importa Tailwind en tu CSS principal (src/style.css):

@import "tailwindcss";

Para instalación con otros frameworks, consulta la guía oficial de instalación de Tailwind CSS.

Fundamentos: el sistema de clases utilitarias

Espaciado (padding y margin)

Tailwind usa una escala numérica donde cada unidad = 4px (0.25rem):

<!-- Padding -->
<div class="p-4">   <!-- padding: 1rem (16px) en todos los lados -->
<div class="px-6">  <!-- padding horizontal: 1.5rem (24px) -->
<div class="py-2">  <!-- padding vertical: 0.5rem (8px) -->
<div class="pt-8">  <!-- padding-top: 2rem (32px) -->

<!-- Margin -->
<div class="m-4">   <!-- margin: 1rem en todos los lados -->
<div class="mx-auto"> <!-- margin horizontal auto (centrar) -->
<div class="mt-6">  <!-- margin-top: 1.5rem -->
<div class="-mt-2"> <!-- margin-top negativo -->

<!-- Gap (para flex y grid) -->
<div class="gap-4">  <!-- gap: 1rem -->
<div class="gap-x-6"> <!-- column-gap: 1.5rem -->

Escala más usada: 1=4px, 2=8px, 3=12px, 4=16px, 6=24px, 8=32px, 12=48px, 16=64px.

Colores

Tailwind incluye una paleta de colores completa con 22 colores y 11 tonalidades cada uno (50 a 950):

<!-- Texto -->
<p class="text-gray-700">Texto oscuro</p>
<p class="text-blue-500">Texto azul</p>
<p class="text-red-600">Texto rojo</p>

<!-- Fondo -->
<div class="bg-white">
<div class="bg-slate-100">
<div class="bg-indigo-600">

<!-- Bordes -->
<div class="border border-gray-300">
<div class="border-2 border-blue-500">

<!-- Opacidad del color -->
<div class="bg-black/50">  <!-- negro con 50% de opacidad -->
<div class="text-white/80"> <!-- blanco con 80% de opacidad -->

Tipografía

<!-- Tamaños de fuente -->
<p class="text-sm">Pequeño (14px)</p>
<p class="text-base">Normal (16px)</p>
<p class="text-lg">Grande (18px)</p>
<p class="text-xl">Extra grande (20px)</p>
<p class="text-2xl">2XL (24px)</p>
<h1 class="text-4xl">4XL (36px)</h1>

<!-- Peso -->
<p class="font-normal">Normal (400)</p>
<p class="font-medium">Medium (500)</p>
<p class="font-semibold">Semibold (600)</p>
<p class="font-bold">Bold (700)</p>

<!-- Alineación -->
<p class="text-center">Centrado</p>
<p class="text-right">Derecha</p>

<!-- Line height y spacing -->
<p class="leading-relaxed">Interlineado relajado</p>
<p class="tracking-wide">Espaciado entre letras amplio</p>

Layout con Flexbox y Grid

<!-- Flexbox -->
<div class="flex items-center justify-between gap-4">
  <div>Izquierda</div>
  <div>Derecha</div>
</div>

<!-- Flex column -->
<div class="flex flex-col gap-2">
  <div>Arriba</div>
  <div>Abajo</div>
</div>

<!-- Grid responsive -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  <div>Card 1</div>
  <div>Card 2</div>
  <div>Card 3</div>
</div>

<!-- Centrar un elemento -->
<div class="flex items-center justify-center min-h-screen">
  <div>Centrado vertical y horizontalmente</div>
</div>

Responsive Design

Tailwind usa un enfoque mobile-first. Las clases sin prefijo aplican a todos los tamaños, y los prefijos agregan estilos desde ese breakpoint hacia arriba:

<!-- Ejemplo: grilla que cambia columnas según el tamaño -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
  <!-- 1 columna en móvil, 2 en tablet, 4 en desktop -->
</div>

<!-- Texto que cambia de tamaño -->
<h1 class="text-2xl md:text-4xl lg:text-5xl font-bold">
  Título responsive
</h1>

<!-- Sidebar que se oculta en móvil -->
<aside class="hidden lg:block w-64">
  Sidebar solo visible en desktop
</aside>

Dark Mode

Tailwind soporta dark mode con el prefijo dark:. Por defecto usa la preferencia del sistema operativo:

<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100">
  <h1 class="text-2xl font-bold">Título</h1>
  <p class="text-gray-600 dark:text-gray-400">
    Este texto se adapta al tema del sistema
  </p>
  <button class="bg-blue-600 dark:bg-blue-500 text-white px-4 py-2 rounded">
    Acción
  </button>
</div>

Componentes reales con Tailwind

Card de producto

<article class="bg-white dark:bg-gray-800 rounded-xl shadow-md overflow-hidden
                hover:shadow-xl transition-shadow duration-300">
  <img src="producto.jpg" alt="Producto"
       class="w-full h-48 object-cover">

  <div class="p-6">
    <span class="text-xs font-semibold text-blue-600 dark:text-blue-400
                  uppercase tracking-wide">
      Nuevo
    </span>
    <h3 class="mt-2 text-xl font-bold text-gray-900 dark:text-white">
      Nombre del Producto
    </h3>
    <p class="mt-2 text-gray-600 dark:text-gray-300 line-clamp-2">
      Descripción breve del producto con un máximo de dos líneas.
    </p>

    <div class="mt-4 flex items-center justify-between">
      <span class="text-2xl font-bold text-gray-900 dark:text-white">
        $49.99
      </span>
      <button class="bg-blue-600 hover:bg-blue-700 text-white
                       px-4 py-2 rounded-lg font-medium
                       transition-colors duration-200">
        Agregar
      </button>
    </div>
  </div>
</article>

Navbar responsive

<nav class="bg-white dark:bg-gray-900 shadow-sm border-b border-gray-200
            dark:border-gray-700">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex items-center justify-between h-16">
      <!-- Logo -->
      <a href="/" class="text-xl font-bold text-gray-900 dark:text-white">
        MiApp
      </a>

      <!-- Links (ocultos en móvil) -->
      <div class="hidden md:flex items-center gap-8">
        <a href="/about" class="text-gray-600 dark:text-gray-300
                                  hover:text-blue-600 dark:hover:text-blue-400
                                  transition-colors">
          About
        </a>
        <a href="/blog" class="text-gray-600 dark:text-gray-300
                                 hover:text-blue-600 transition-colors">
          Blog
        </a>
        <a href="/contact" class="bg-blue-600 hover:bg-blue-700 text-white
                                    px-4 py-2 rounded-lg transition-colors">
          Contacto
        </a>
      </div>
    </div>
  </div>
</nav>

Formulario de login

<form class="max-w-md mx-auto bg-white dark:bg-gray-800 p-8 rounded-xl shadow-lg">
  <h2 class="text-2xl font-bold text-center text-gray-900 dark:text-white mb-6">
    Iniciar Sesión
  </h2>

  <div class="space-y-4">
    <div>
      <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
        Email
      </label>
      <input type="email"
             class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600
                    rounded-lg bg-white dark:bg-gray-700
                    text-gray-900 dark:text-white
                    focus:ring-2 focus:ring-blue-500 focus:border-transparent
                    outline-none transition"
             placeholder="tu@email.com">
    </div>

    <div>
      <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
        Contraseña
      </label>
      <input type="password"
             class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600
                    rounded-lg bg-white dark:bg-gray-700
                    text-gray-900 dark:text-white
                    focus:ring-2 focus:ring-blue-500 focus:border-transparent
                    outline-none transition"
             placeholder="••••••••">
    </div>

    <button type="submit"
            class="w-full bg-blue-600 hover:bg-blue-700 text-white
                   font-medium py-2.5 rounded-lg transition-colors duration-200">
      Entrar
    </button>
  </div>
</form>

Animaciones y transiciones

<!-- Transición de color suave -->
<button class="bg-blue-600 hover:bg-blue-700 transition-colors duration-200">

<!-- Transición de escala al hover -->
<div class="hover:scale-105 transition-transform duration-300">

<!-- Animación de pulso -->
<span class="animate-pulse bg-red-500 rounded-full h-3 w-3"></span>

<!-- Animación de spin (loading) -->
<svg class="animate-spin h-5 w-5 text-white">...</svg>

<!-- Combinación de transiciones -->
<div class="opacity-0 hover:opacity-100 translate-y-2 hover:translate-y-0
            transition-all duration-300 ease-out">

Tailwind vs Bootstrap: diferencias clave

Tips y buenas prácticas

1. Usa la extensión de VS Code: Tailwind CSS IntelliSense te da autocompletado, preview de colores y lint. Es imprescindible.
2. Ordena las clases: Usa el plugin de Prettier para Tailwind que ordena automáticamente las clases en un orden consistente.
3. Extrae componentes, no clases: Si repites un grupo de clases, crea un componente (React/Vue/Blade) en lugar de crear una clase CSS con @apply.
4. Mobile first: Diseña primero para móvil y agrega complejidad con prefijos responsive. No al revés.
5. Usa @apply con moderación: Solo para estilos base (como tipografía de prosa), no para componentes. El propósito de Tailwind es evitar escribir CSS.

Recursos oficiales

• Documentación oficial: La mejor referencia, con buscador excelente y ejemplos.
• Tailwind UI: Componentes profesionales de los creadores de Tailwind (de pago, pero excelente referencia).
• Flowbite: Componentes gratuitos con Tailwind CSS.
• Tailwind Play: Playground oficial para experimentar en el navegador.

Tailwind CSS no es para todos ni para todos los proyectos, pero para aplicaciones web modernas donde necesitas velocidad de desarrollo y consistencia visual, es difícil de superar. Dale una semana de uso real y probablemente no querrás volver a escribir CSS tradicional.