Tailwind CSS ha revolucionado la forma en que escribimos estilos en proyectos web. En lugar de escribir CSS personalizado o depender de componentes predefinidos como hace Bootstrap, Tailwind te proporciona clases de utilidad de bajo nivel que puedes combinar directamente en tu HTML para construir cualquier diseño que imagines. Si nunca lo has probado, esta guía te llevará desde la instalación hasta los patrones más usados en proyectos reales.

En este artículo:

¿Qué es Tailwind CSS y en qué se diferencia de otros frameworks?

Tailwind CSS es un framework de CSS de tipo utility-first (utilidades primero). La diferencia fundamental con frameworks como Bootstrap o Material UI es conceptual: mientras que Bootstrap te da componentes ya construidos con su propio aspecto visual (botones, tarjetas, modales), Tailwind te da piezas mínimas de estilo que combinas tú mismo.

Por ejemplo, para crear un botón azul redondeado en Bootstrap escribes:

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

En Tailwind lo harías así:

<button class="bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded transition">
  Enviar
</button>

Parece más verboso, y lo es al principio. Pero la ventaja es que tienes control total sobre el diseño sin escribir una sola línea de CSS adicional y sin luchar contra estilos predefinidos que necesitas sobrescribir.

Tailwind también tiene un sistema de purging muy eficiente: en producción, solo genera el CSS de las clases que realmente usas en tu proyecto, lo que resulta en archivos CSS extremadamente pequeños (habitualmente 5-20 KB), comparado con los 200+ KB de Bootstrap.

Instalación y configuración inicial

La forma recomendada de usar Tailwind en proyectos modernos es instalarlo como paquete npm. Funciona con Vite, Next.js, Angular, Vue y cualquier proyecto basado en Node.js:

# Instalar Tailwind y sus dependencias
npm install -D tailwindcss postcss autoprefixer

# Generar los archivos de configuración
npx tailwindcss init -p

Esto crea dos archivos: tailwind.config.js y postcss.config.js. En tailwind.config.js, debes indicar qué archivos va a escanear Tailwind para detectar las clases que usas:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './src/**/*.{html,js,ts,jsx,tsx,vue}',
    './index.html',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Luego, en tu archivo CSS principal (normalmente src/index.css o src/styles.css), añade las directivas de Tailwind:

@tailwind base;
@tailwind components;
@tailwind utilities;

Y ya está. Para proyectos con Vite, añade el archivo CSS al punto de entrada de tu aplicación y listo. Si usas Angular, añade el path en angular.json bajo styles.

Clases fundamentales que usarás todos los días

Tailwind tiene cientos de clases, pero hay un subconjunto que usarás constantemente. Aquí tienes las categorías más importantes con ejemplos de uso:

Flexbox y Grid:

<!-- Centra contenido vertical y horizontalmente -->
<div class="flex items-center justify-center min-h-screen">
  <p>Contenido centrado</p>
</div>

<!-- Grid de 3 columnas con gap -->
<div class="grid grid-cols-3 gap-4">
  <div>Col 1</div>
  <div>Col 2</div>
  <div>Col 3</div>
</div>

Tipografía:

<h1 class="text-3xl font-bold text-gray-900 tracking-tight">Título principal</h1>
<p class="text-base text-gray-600 leading-relaxed mt-2">Párrafo descriptivo con buen interlineado.</p>
<span class="text-sm font-medium text-blue-600 uppercase">Categoría</span>

Espaciado (padding y margin):

Tailwind usa una escala numérica donde cada unidad equivale a 4px (rem). Así, p-4 es 1rem (16px), p-8 es 2rem (32px), etc.:

<div class="p-6 mt-4 mb-8 px-10 py-3">
  <!-- p-6: padding en todos los lados -->
  <!-- mt-4: margin-top -->
  <!-- mb-8: margin-bottom -->
  <!-- px-10: padding horizontal -->
  <!-- py-3: padding vertical -->
</div>

Bordes y sombras:

<div class="border border-gray-200 rounded-xl shadow-lg p-6">
  Tarjeta con borde, bordes redondeados y sombra
</div>

<div class="rounded-full bg-blue-100 p-3">
  Círculo para icono
</div>

Diseño responsive con Tailwind

El diseño responsive en Tailwind es inmensamente sencillo gracias a sus breakpoint prefixes. Los breakpoints por defecto son: sm (640px), md (768px), lg (1024px), xl (1280px) y 2xl (1536px). Tailwind sigue el enfoque mobile-first: las clases sin prefijo aplican en todos los tamaños, y los prefijos aplican a ese tamaño en adelante.

<!-- 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-6">
  <div class="bg-white rounded-lg shadow p-4">Tarjeta 1</div>
  <div class="bg-white rounded-lg shadow p-4">Tarjeta 2</div>
  <div class="bg-white rounded-lg shadow p-4">Tarjeta 3</div>
</div>

<!-- Texto más grande en pantallas grandes -->
<h1 class="text-2xl md:text-4xl lg:text-6xl font-bold">
  Título responsive
</h1>

<!-- Ocultar en móvil, mostrar en desktop -->
<nav class="hidden lg:flex items-center gap-4">
  <a href="/">Inicio</a>
  <a href="/about">Acerca</a>
</nav>

Trabajar con responsive en Tailwind es mucho más intuitivo que escribir media queries manualmente. Todo queda en la misma línea del elemento HTML, por lo que es inmediatamente visible qué aspecto tendrá en cada dispositivo.

Modo oscuro con Tailwind

Tailwind incluye soporte nativo para el modo oscuro usando el prefijo dark:. Puedes configurarlo de dos maneras en tailwind.config.js:

// Modo "media": respeta la preferencia del sistema operativo
module.exports = {
  darkMode: 'media', // default
  // ...
}

// Modo "class": activa el modo oscuro cuando el elemento  tiene la clase "dark"
module.exports = {
  darkMode: 'class',
  // ...
}

El modo class es más flexible ya que te permite togglear el modo oscuro desde JavaScript independientemente de la preferencia del sistema. Una vez configurado, usas el prefijo dark: para aplicar estilos en modo oscuro:

<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 p-6 rounded-lg">
  <h2 class="text-xl font-bold text-gray-800 dark:text-white">Título</h2>
  <p class="text-gray-600 dark:text-gray-400 mt-2">
    Este contenido adapta sus colores automáticamente.
  </p>
</div>

Para togglear el modo con JavaScript (modo class):

// Activar modo oscuro
document.documentElement.classList.add('dark');

// Desactivar modo oscuro
document.documentElement.classList.remove('dark');

// Toggle
document.documentElement.classList.toggle('dark');

Componentes prácticos paso a paso

Ver cómo se construyen componentes reales es la mejor forma de entender Tailwind en la práctica. Aquí tienes algunos de los más habituales:

Navbar responsive:

<nav class="bg-white shadow-sm border-b border-gray-100">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex justify-between items-center h-16">
      <!-- Logo -->
      <a href="/" class="text-xl font-bold text-blue-600">MiApp</a>
      
      <!-- Links en desktop -->
      <div class="hidden md:flex items-center gap-6">
        <a href="/" class="text-gray-600 hover:text-blue-600 transition">Inicio</a>
        <a href="/blog" class="text-gray-600 hover:text-blue-600 transition">Blog</a>
        <a href="/contacto" class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition">Contacto</a>
      </div>
    </div>
  </div>
</nav>

Tarjeta de producto:

<div class="bg-white rounded-2xl shadow-md overflow-hidden hover:shadow-xl transition-shadow duration-300">
  <img src="/imagen.jpg" alt="Producto" class="w-full h-48 object-cover">
  <div class="p-5">
    <span class="text-xs font-semibold text-blue-600 uppercase tracking-wide">Categoría</span>
    <h3 class="text-lg font-bold text-gray-900 mt-1">Nombre del Producto</h3>
    <p class="text-gray-500 text-sm mt-2 line-clamp-2">
      Descripción breve del producto que puede ser larga...
    </p>
    <div class="flex items-center justify-between mt-4">
      <span class="text-2xl font-bold text-gray-900">€29.99</span>
      <button class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition text-sm font-medium">
        Añadir al carrito
      </button>
    </div>
  </div>
</div>

Personalización con tailwind.config

Una de las grandes ventajas de Tailwind es que todo es personalizable. Puedes extender la paleta de colores, tipografías, espaciados o cualquier valor del sistema de diseño a través de la sección theme.extend en tailwind.config.js:

module.exports = {
  content: ['./src/**/*.{html,js,ts,jsx,tsx}'],
  theme: {
    extend: {
      colors: {
        brand: {
          50:  '#eff6ff',
          100: '#dbeafe',
          500: '#3b82f6',
          600: '#2563eb',
          700: '#1d4ed8',
          900: '#1e3a8a',
        },
        'texto-principal': '#1a1a2e',
      },
      fontFamily: {
        sans: ['Inter', 'sans-serif'],
        mono: ['JetBrains Mono', 'monospace'],
      },
      borderRadius: {
        '4xl': '2rem',
      },
      boxShadow: {
        'card': '0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
      }
    },
  },
};

Una vez añadidos, puedes usar estos valores como clases de Tailwind normales: bg-brand-600, font-sans, text-texto-principal, shadow-card, etc.

Plugins oficiales de Tailwind

Tailwind Labs mantiene varios plugins oficiales que añaden funcionalidades muy útiles:

@tailwindcss/typography añade la clase prose, que aplica tipografía hermosa a contenido HTML generado dinámicamente (como el que viene de un CMS o de Markdown). Es perfecta para blogs y artículos:

<article class="prose prose-lg max-w-none">
  <!-- Todo el HTML generado por el CMS tendrá estilos tipográficos bien definidos -->
  {{ contenido }}
</article>

@tailwindcss/forms normaliza los estilos de los elementos de formulario para que sean fácilmente personalizables con Tailwind. Sin él, los inputs, selects y checkboxes tienen estilos del navegador difíciles de sobrescribir.

@tailwindcss/line-clamp (ahora integrado en el núcleo desde Tailwind v3.3) permite truncar texto a un número específico de líneas con la clase line-clamp-{n}:

<p class="line-clamp-3 text-gray-600">
  Este texto muy largo será recortado después de 3 líneas mostrando puntos suspensivos...
</p>

Consejos y buenas prácticas

Después de usar Tailwind en varios proyectos, estos son los consejos que más impacto tienen en la productividad y el mantenimiento del código:

Usa la directiva @apply para clases repetitivas: Cuando tienes una combinación de clases que se repite muchas veces (como los estilos de un botón), crea una clase CSS reutilizable con @apply. Esto mantiene lo mejor de los dos mundos:

/* En tu archivo CSS */
@layer components {
  .btn-primary {
    @apply bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded-lg transition;
  }
  
  .card {
    @apply bg-white rounded-xl shadow-md p-6 border border-gray-100;
  }
}

/* En tu HTML */
<button class="btn-primary">Enviar</button>
<div class="card">Contenido</div>

Instala la extensión Tailwind CSS IntelliSense en VS Code: Es la extensión más útil que puedes instalar si usas Tailwind. Te da autocompletado de clases, vista previa de colores, y avisa cuando escribes una clase inválida. Sin ella, trabajar con Tailwind es mucho más lento.

Ordena las clases de forma consistente: Las clases de Tailwind pueden ponerse en cualquier orden, pero es bueno seguir una convención: layout (flex, grid, w, h) → spacing (p, m) → tipografía → colores → bordes → efectos. Existe prettier-plugin-tailwindcss que ordena las clases automáticamente según la convención oficial.

Conclusión

Tailwind CSS es hoy uno de los frameworks de CSS más populares del ecosistema web, y con razón: acelera el desarrollo, genera CSS mínimo en producción y elimina la necesidad de pensar en nombres de clases CSS. La curva de aprendizaje inicial (memorizar las clases) se supera en pocos días con el autocompletado del editor, y a partir de ahí la productividad se dispara.

Si ya dominas Tailwind y quieres profundizar en CSS sin frameworks, el artículo sobre CSS moderno avanzado con Container Queries y Subgrid te mostrará características nativas del lenguaje que complementan perfectamente Tailwind. Y si buscas mejorar tu flujo de trabajo completo, el artículo sobre Docker para desarrolladores web te ayudará a estandarizar tu entorno de desarrollo.