Tutorial de Tailwind CSS en español: de cero a tu primer componente

19/08/2026 | 11 minutos de lectura

Este tutorial de Tailwind CSS en español es el que me habría gustado encontrar cuando empecé: nada de teoría interminable, sino código que copias, pegas y ves funcionar. Sales de aquí sabiendo instalar Tailwind, usar sus clases y montar tu primer componente real.

Vamos a trabajar con Tailwind CSS v4, la versión actual en 2026. Cambió bastante respecto a la v3: la instalación es más simple, la configuración vive dentro del CSS y ya no necesitas casi ningún archivo de config. Te enseño todo con ejemplos que puedes pegar tal cual.

Al final montaremos juntos una tarjeta de producto con botón, la haremos responsive con los prefijos sm, md y lg, y le añadiremos modo oscuro. Manos a la obra.

Qué es Tailwind CSS y por qué usarlo

Tailwind CSS es un framework de CSS basado en clases utilitarias. En lugar de escribir tus propias reglas en una hoja de estilos, aplicas clases pequeñas directamente en el HTML: una para el color de fondo, otra para el espaciado, otra para el tamaño de letra. Cada clase hace una sola cosa.

Compáralo con el CSS tradicional. Normalmente escribes algo así:

/* CSS tradicional */
.boton {
  background-color: #2563eb;
  color: white;
  padding: 8px 16px;
  border-radius: 8px;
}

Con Tailwind, ese mismo botón se define sin salir del HTML, combinando clases:

<!-- Lo mismo con Tailwind -->
<button class="bg-blue-600 text-white px-4 py-2 rounded-lg">
  Enviar
</button>

Seré honesto con las dos caras. Al principio el HTML se llena de clases y asusta un poco. A cambio dejas de inventar nombres para cada clase, no saltas entre archivos y evitas ese CSS global que crece sin control. Cuando trabajas con componentes (React, Vue o plantillas), esa «verbosidad» deja de molestar y ganas velocidad.

Si dudas entre Tailwind y otras opciones, te vendrá bien leer mi guía sobre frameworks populares en diseño web y cuál elegir. Y si vienes de Bootstrap, verás que el enfoque es opuesto: Bootstrap te da componentes ya montados; Tailwind te da piezas para montar los tuyos.

Instalación paso a paso en 2026 (Tailwind v4)

Tienes dos caminos. El primero, sin instalar nada, para probar en cinco minutos. El segundo, con un proyecto real de Vite, que es como trabajarás en serio.

Opción rápida: sin instalar nada (CDN)

Para experimentar, Tailwind v4 ofrece una versión de navegador. Creas un archivo index.html, pegas este script en el head y ya puedes usar clases:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<body>
  <h1 class="text-3xl font-bold text-blue-600">Hola, Tailwind</h1>
</body>
</html>

Abre el archivo en el navegador y verás el título en azul y en negrita. Perfecto para practicar. Eso sí, esta versión es solo para pruebas: no la uses en producción porque compila las clases en el navegador cada vez que carga la página.

Opción recomendada: con Vite (v4)

Para un proyecto de verdad, lo estándar hoy es el plugin de Vite. La gran novedad de la v4 es que ya no necesitas PostCSS ni Autoprefixer ni el archivo tailwind.config.js para empezar. Son cuatro pasos.

Primero, crea el proyecto e instala Tailwind y su plugin de Vite:

npm create vite@latest mi-proyecto
cd mi-proyecto
npm install
npm install tailwindcss @tailwindcss/vite

Segundo, añade el plugin en vite.config.js:

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

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

Tercero, abre tu hoja de estilos principal (por ejemplo src/style.css), borra lo que haya y deja una sola línea:

@import "tailwindcss";

Cuarto, arranca el servidor de desarrollo:

npm run dev

Ya está. Si vienes de la v3, olvídate de la vieja fórmula @tailwind base; @tailwind components; @tailwind utilities;: en la v4 se sustituye por ese único @import «tailwindcss». Menos ceremonia y arranque más rápido.

Tailwind v4 apunta a navegadores modernos (Chrome 111+, Safari 16.4+, Firefox 128+). Para proyectos nuevos no es problema; si necesitas dar soporte a navegadores antiguos, tenlo en cuenta antes de empezar.

Clases utilitarias esenciales con ejemplos

Aquí está el corazón de Tailwind. No hace falta memorizar nada: las clases siguen un patrón lógico y en cuanto lo pillas, las adivinas. Te muestro las familias que vas a usar el 90% del tiempo, con ejemplos de Tailwind reales.

Espaciado: padding y margin

La p es padding y la m es margin. Les añades una dirección y un número. El número va en pasos de 4px: 4 son 16px, 2 son 8px.

p-4    /* padding: 16px por los 4 lados */
px-6   /* padding izquierda y derecha: 24px */
py-2   /* padding arriba y abajo: 8px */
mt-8   /* margin-top: 32px */
mx-auto /* margen horizontal automático: centra el bloque */

Tipografía

Tamaño con text-, grosor con font- y alineación con text-left, text-center o text-right.

text-sm       /* letra pequeña */
text-xl       /* letra grande */
font-bold     /* negrita */
font-medium   /* grosor intermedio */
text-center   /* texto centrado */
leading-relaxed /* interlineado holgado */

Color de fondo y de texto

Fondo con bg- y texto con text-, seguido de un color y una intensidad de 50 a 950. Cuanto mayor el número, más oscuro.

bg-white          /* fondo blanco */
bg-blue-600       /* fondo azul medio */
text-gray-900     /* texto casi negro */
text-white        /* texto blanco */
bg-red-100        /* fondo rojo muy claro */

Flexbox y grid

Para colocar elementos, Tailwind traduce Flexbox y Grid a clases directas. Con flex activas Flexbox; con items-center centras en vertical; con justify-between separas los extremos; y con gap-4 pones espacio entre hijos.

<!-- Fila con los extremos separados y centrada en vertical -->
<div class="flex items-center justify-between gap-4">
  <span>Izquierda</span>
  <span>Derecha</span>
</div>

<!-- Rejilla de 3 columnas iguales con separación -->
<div class="grid grid-cols-3 gap-4">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Con estas cinco familias (espaciado, tipografía, color, Flexbox y Grid) ya puedes construir casi cualquier interfaz. El resto son variaciones del mismo patrón: nombre, propiedad, valor.

Monta un componente real: una tarjeta de producto

Teoría suficiente. Vamos a construir una tarjeta de producto de principio a fin, sumando clases poco a poco para que veas de dónde sale cada una.

Empezamos por la caja: ancho máximo, fondo blanco, esquinas redondeadas, sombra y padding interior.

<div class="max-w-sm rounded-xl bg-white p-6 shadow-md">
  <!-- contenido -->
</div>

Dentro metemos la imagen, el título y una descripción. Fíjate en object-cover, que recorta la foto para que no se deforme, y en los márgenes superiores (mt-) para separar cada bloque.

<div class="max-w-sm rounded-xl bg-white p-6 shadow-md">
  <img class="h-40 w-full rounded-lg object-cover"
       src="auriculares.jpg" alt="Auriculares">
  <h3 class="mt-4 text-xl font-semibold text-gray-900">
    Auriculares Pro
  </h3>
  <p class="mt-2 text-sm text-gray-600">
    Sonido envolvente y 30 horas de batería.
  </p>
</div>

Ahora la fila de abajo: precio a la izquierda, botón a la derecha. Aquí reaparecen flex, items-center y justify-between. Al botón le doy un color de fondo y un cambio de tono al pasar el ratón con hover:bg-blue-700.

<div class="max-w-sm rounded-xl bg-white p-6 shadow-md">
  <img class="h-40 w-full rounded-lg object-cover"
       src="auriculares.jpg" alt="Auriculares">
  <h3 class="mt-4 text-xl font-semibold text-gray-900">
    Auriculares Pro
  </h3>
  <p class="mt-2 text-sm text-gray-600">
    Sonido envolvente y 30 horas de batería.
  </p>
  <div class="mt-4 flex items-center justify-between">
    <span class="text-2xl font-bold text-gray-900">89 €</span>
    <button class="rounded-lg bg-blue-600 px-4 py-2 text-sm
                   font-medium text-white hover:bg-blue-700">
      Comprar
    </button>
  </div>
</div>

Eso es una tarjeta completa, sin una sola línea de CSS propio. Cópiala en tu proyecto, cambia el texto y verás cómo cobra vida. El hover: delante de una clase es el patrón de los estados: se aplica solo cuando ocurre esa interacción.

Responsive con sm, md y lg

Tailwind es mobile-first: las clases sin prefijo valen para móvil, y los prefijos sm:, md:, lg: y xl: añaden cambios de ahí hacia arriba. Son atajos de las media queries de toda la vida.

PrefijoSe activa desdeDispositivo típico
(sin prefijo)0pxMóvil
sm:640pxMóvil grande / tablet vertical
md:768pxTablet
lg:1024pxPortátil
xl:1280pxEscritorio

Un ejemplo clásico: una rejilla que muestra una columna en móvil, dos en tablet y tres en escritorio. Se lee de izquierda a derecha, de pantalla pequeña a grande.

<div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
  <div>Tarjeta 1</div>
  <div>Tarjeta 2</div>
  <div>Tarjeta 3</div>
</div>

Aplica el mismo patrón al texto. Aquí el título es mediano en móvil y crece en escritorio:

<h1 class="text-2xl md:text-4xl font-bold">
  Título adaptable
</h1>

Si quieres entender qué ocurre por debajo de estos prefijos, te lo explico en detalle en mi guía de CSS media queries. Tailwind no reinventa nada: solo te ahorra escribirlas a mano.

Modo oscuro

El modo oscuro funciona igual que los estados: antepones dark: a la clase que quieres cambiar cuando el tema es oscuro. Por defecto, Tailwind v4 sigue la preferencia del sistema operativo del usuario, así que no configuras nada.

<div class="bg-white text-gray-900 dark:bg-gray-800 dark:text-white p-6 rounded-xl">
  Me adapto al modo oscuro del sistema.
</div>

¿Y si quieres un botón para que el usuario cambie de tema a mano? En la v4 se declara con una línea en tu CSS, justo debajo del import. Esto le dice a Tailwind que el modo oscuro se active cuando exista la clase dark en un elemento padre:

@import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark *));

Luego, con una línea de JavaScript, alternas esa clase en la etiqueta html:

<button onclick="document.documentElement.classList.toggle('dark')">
  Cambiar tema
</button>

Con eso ya controlas el tema desde la interfaz. Es uno de los cambios frente a la v3, donde el modo oscuro por clase se activaba en el archivo de configuración; ahora vive en el CSS.

Personalizar tu tema con @theme

Tarde o temprano querrás tu propio color de marca o tu tipografía. En la v4 no hace falta el antiguo tailwind.config.js: defines los tokens dentro del CSS con la directiva @theme.

@import "tailwindcss";

@theme {
  --color-marca: #7c3aed;
  --font-display: "Poppins", sans-serif;
}

A partir de ahí, Tailwind genera clases nuevas con esos nombres. Puedes usar bg-marca, text-marca o font-display como si vinieran de fábrica:

<button class="bg-marca text-white font-display px-4 py-2 rounded-lg">
  Botón con mi marca
</button>

Este enfoque «CSS-first» es la gran idea de la v4: la configuración vive junto a tus estilos, no en un archivo aparte de JavaScript. Menos saltos entre ficheros y una sola fuente de verdad.

Buenas prácticas y errores comunes

Estos son los tropiezos que veo repetirse en quien empieza. Evítalos y tu experiencia con Tailwind será mucho más llevadera.

  • Repetir la misma ristra de clases por todas partes. Si copias el mismo botón diez veces, conviértelo en un componente (React, Vue, o una parcial de tu plantilla) y reutilízalo. Ese es el uso natural de Tailwind.
  • Pelear contra el sistema de espaciado. Usa la escala de Tailwind (p-4, gap-6) en vez de valores sueltos. Mantiene el diseño coherente sin esfuerzo.
  • Olvidar la etiqueta viewport. Sin meta viewport en el HTML, los prefijos responsive no se comportan como esperas en el móvil.
  • Abusar de valores arbitrarios. Tailwind permite escribir w-[137px], pero si lo usas en todo, pierdes la coherencia. Resérvalo para casos puntuales.
  • Buscar clases de memoria. No hace falta. Ten a mano la documentación y, mejor aún, la extensión oficial de Tailwind para tu editor: te autocompleta las clases mientras escribes.

Cuando tengas dudas sobre una clase concreta, la documentación oficial de Tailwind es la referencia definitiva. Está en inglés, pero el buscador por propiedad es rapidísimo.

Tip: si prefieres aprender con un proyecto guiado en vídeo y en español, un curso de Tailwind CSS te ahorra semanas de prueba y error. Con este tutorial tienes de sobra para empezar; el curso es opcional si buscas ir más rápido.

Sigue practicando

Ya sabes instalar Tailwind, usar sus clases y montar un componente responsive con modo oscuro. El siguiente paso es aplicarlo a una página entera. Estas guías del blog te ayudan:

Preguntas frecuentes

¿Tailwind CSS es difícil para principiantes?

Si ya conoces algo de CSS, la curva es corta. Las clases nombran las mismas propiedades que ya usas (padding, color, flex), solo que como atajos. Lo que más cuesta al principio es acostumbrarse a ver muchas clases en el HTML, pero en un par de días deja de molestar.

¿Necesito saber CSS antes de usar Tailwind?

Conviene mucho. Tailwind no sustituye a CSS: es CSS con otra sintaxis. Saber qué hacen flex, grid o padding te permite adivinar las clases en vez de memorizarlas. Con una base media de CSS irás sobrado.

¿Qué diferencia hay entre Tailwind v3 y v4?

La v4 simplifica la instalación (un solo @import «tailwindcss» en vez de las tres directivas antiguas), elimina la necesidad de PostCSS con el plugin de Vite y mueve la configuración al CSS con @theme y @custom-variant. Es más rápida y con menos archivos.

¿Puedo usar Tailwind con WordPress o con HTML plano?

Sí. Para practicar te vale la versión de navegador que vimos en la instalación. Para producción, lo suyo es un proceso de compilación (Vite u otro) que genere solo el CSS que usas. En WordPress se integra vía el tema o mediante un proceso de build propio.

¿Tailwind hace mi web más lenta por tantas clases?

Al contrario. En producción, Tailwind genera únicamente el CSS de las clases que realmente usas, así que el archivo final suele ser pequeño. Las clases en el HTML no penalizan el rendimiento; lo que cuenta es el CSS que se descarga, y ese queda muy ajustado.

Con esto ya tienes tu primer componente de Tailwind funcionando. Abre el editor, copia la tarjeta y cámbiale los colores hasta que sea tuya. Si el tutorial te ha servido, compártelo con quien esté empezando con CSS.

Entradas relacionadas

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Scroll al inicio