¿Qué es Tailwind CSS? Aprende a diseñar webs modernas como un profesional

Tailwind CSS es un framework de CSS utility-first que ha revolucionado cómo construimos interfaces. En lugar de escribir CSS personalizado, compones diseños usando clases predefinidas.

¿Qué significa utility-first? Cada clase hace una sola cosa: bg-blue-500 pone fondo azul, p-4 añade padding, rounded-lg redondea bordes. Combinas clases para crear cualquier diseño.

Ventajas sobre CSS tradicional. No inventas nombres de clases. No saltas entre archivos. No tienes CSS muerto que nadie usa. Todo está en el HTML, visible y modificable.

¿No es feo tener tantas clases? Al principio lo parece. Pero extraes componentes (Button, Card, Input) y la repetición desaparece. Además, el HTML se vuelve autodocumentado.

Instalación en un proyecto nuevo. Con Next.js usa el flag --tailwind, o instálalo manualmente:

$ npm install tailwindcss postcss autoprefixer

$ npx tailwindcss init -p

Configuración básica. tailwind.config.js define tus colores, fuentes, breakpoints personalizados. Extiende el tema base o sobreescríbelo completamente:

// tailwind.config.js
module.exports = {
  darkMode: 'class',
  theme: {
    extend: {
      colors: {
        primary: '#C1DF1F',
        secondary: '#00D4FF',
      },
    },
  },
  plugins: [],
}

Responsive design. Prefijos sm:, md:, lg:, xl: aplican estilos en breakpoints específicos. Mobile-first: sin prefijo es mobile, con prefijo es 'desde ese breakpoint hacia arriba'.

<div class="p-4 md:p-8 lg:p-12">
  <h1 class="text-xl md:text-3xl lg:text-5xl">
    Responsive title
  </h1>
</div>

Dark mode. Añade darkMode: 'class' en config. Usa dark:bg-gray-900 dark:text-white. Alterna la clase 'dark' en el html para cambiar tema.

Plugins útiles. @tailwindcss/forms para estilos de formularios. @tailwindcss/typography para prose en contenido de blog. @tailwindcss/aspect-ratio para ratios de imagen.

Tailwind no es para todos los proyectos, pero para aplicaciones y sitios donde controlas el HTML, es una maravilla. La productividad se dispara una vez superas la curva inicial.