Tailwind es hoy el framework de CSS más usado en proyectos nuevos, y el que suelen escribir las herramientas de IA cuando generan una web. Su idea es distinta a la de Bootstrap: no trae componentes, sino clases de utilidad muy pequeñas (una propiedad cada una) que combinas en el HTML para diseñar cualquier cosa.

<a href="#" class="inline-block rounded-full bg-red-600 px-6 py-3 font-semibold text-white hover:bg-red-700">
  Ver trabajos
</a>

¿Parece mucho texto en el HTML? Sí, y es a propósito: no tienes que inventar nombres de clases ni saltar entre ficheros. Si entiendes CSS, entiendes Tailwind: cada clase es una propiedad que ya conoces.

Espacio y tamaño: p-4, px-6, mt-8, gap-4, w-full, max-w-3xl, mx-auto (centrar), h-screen.

Tipografía: text-sm … text-6xl, font-bold, leading-relaxed, tracking-wide, uppercase, text-center.

Color: text-slate-800, bg-amber-100, border-sky-500. Cada color tiene tonos de 50 (muy claro) a 950 (muy oscuro). Transparencia con barra: bg-black/50.

Flexbox y Grid: flex items-center justify-between, grid grid-cols-3 gap-6.

Bordes y sombras: border, rounded-xl, shadow-md.

Estados: prefijo con dos puntos: hover:, focus-visible:, active:, disabled:.

Adaptable (mobile first): prefijos sm: (≥ 640 px), md: (≥ 768), lg: (≥ 1024), xl: (≥ 1280). Sin prefijo, se aplica en móvil.

<section class="mx-auto grid max-w-5xl grid-cols-1 gap-6 p-6 md:grid-cols-2 lg:grid-cols-3">
  <article class="overflow-hidden rounded-xl bg-white shadow-md transition hover:shadow-xl">
    <img class="aspect-[4/3] w-full object-cover" src="img/cartel.webp" alt="Cartel del Festival de Otoño">
    <div class="p-5">
      <p class="text-xs uppercase tracking-widest text-red-600">Cartelismo</p>
      <h3 class="mt-1 text-xl font-bold text-slate-900">Festival de Otoño</h3>
    </div>
  </article>
  <!-- más tarjetas… -->
</section>

Modo oscuro: prefijo dark: (sigue la preferencia del sistema): bg-white text-slate-900 dark:bg-slate-900 dark:text-slate-100.

En un proyecto real, Tailwind se instala con npm y genera un único fichero CSS con solo las clases que usas (lección La terminal y npm).

npm init -y
npm install -D tailwindcss @tailwindcss/cli

Crea src/input.css con una sola línea:

@import "tailwindcss";

Y genera el CSS final, vigilando cambios:

npx @tailwindcss/cli -i ./src/input.css -o ./css/estilos.css --watch

En tu HTML enlazas css/estilos.css como siempre. Guárdalo como script en package.json para no tener que recordarlo:

"scripts": {
  "dev": "tailwindcss -i ./src/input.css -o ./css/estilos.css --watch",
  "build": "tailwindcss -i ./src/input.css -o ./css/estilos.css --minify"
}

Los colores y fuentes de tu marca se añaden en el mismo input.css, con @theme:

@import "tailwindcss";

@theme {
  --color-marca: oklch(58% 0.2 27);
  --color-tinta: oklch(25% 0.03 260);
  --font-display: "Poppins", sans-serif;
}

Y aparecen clases nuevas: bg-marca, text-tinta, font-display. Así Tailwind deja de parecerse a todas las webs hechas con Tailwind.

💡 Consejo. Instala la extensión Tailwind CSS IntelliSense en VS Code: autocompleta las clases y, al pasar el ratón, muestra el CSS que genera cada una. Es la mejor forma de aprender.

Lo que no cambia en ninguno: jerarquía, retícula, contraste y accesibilidad dependen de ti.

1. Con el CDN, rehaz con Tailwind la tarjeta de proyecto de la lección Fondos, bordes, sombras y filtros y el botón de la lección Componentes de interfaz con CSS.
2. Monta una retícula de seis tarjetas de 1 / 2 / 3 columnas con md: y lg:.
3. Pasa el proyecto a npm: input.css, script dev y @theme con tu color y tu fuente.
4. Añade el modo oscuro con dark: y comprueba el contraste en los dos modos.

• Construir nombres de clase "a trozos" ("bg-" + color): Tailwind solo genera las clases que encuentra escritas completas en tus ficheros.
• Olvidar que sin prefijo es móvil: md:grid-cols-3 solo empieza a partir de 768 px.
• Tener parado el --watch: cambias clases y "no pasa nada" porque el CSS no se regenera.
• Dejar el script del CDN en la web publicada.
• Copiar interfaces de Tailwind (de la IA o de plantillas) sin revisar alt, etiquetas y contraste.