Curso de Tailwind CSS

Bienvenido al Curso de Tailwind CSS. Empieza desde cero y llega hasta personalizar el tema, crear tus propias utilidades y llevar un proyecto a producción. Cada utilidad se enseña con su resultado real: el curso tiene más de 500 figuras, y los ejemplos se han compilado y medido en el navegador con las versiones indicadas.

Es adecuado para los ciclos formativos de DAW y DAM, para asignaturas universitarias de desarrollo web y para quien venga de Bootstrap o de Tailwind 3.

💡 Consejo: Necesitas saber HTML y CSS. Si no es así, empieza por el Curso de HTML5, CSS3 y Bootstrap. Si quieres usar Tailwind con un framework, sigue con el Curso de React o el Curso de Angular.

¿Qué vas a aprender?

Al finalizar este curso serás capaz de:

  • Entender el enfoque utility-first y lo que genera cada clase
  • Dominar espaciado, tipografía, color, bordes y efectos
  • Maquetar con Flexbox, Grid y posicionamiento
  • Crear diseños responsive y con consultas de contenedor
  • Usar variantes y estados: hover, group, peer, has, not y más
  • Añadir modo oscuro y temas múltiples
  • Animar con transiciones, keyframes y 3D
  • Personalizar el tema con @theme y crear utilidades con @utility
  • Reutilizar estilos con @apply, tailwind-merge y class-variance-authority
  • Integrar Tailwind en React, Angular, Next.js, Vue y Svelte
  • Migrar de la versión 3 a la 4 y preparar un proyecto para producción

Versión del curso

El curso utiliza Tailwind CSS 4.3, la última versión estable, con Vite 8. Solo se enseñan versiones estables: ni insiders ni preliminares.

¿Qué versión elegir?

Tailwind 4 no es LTS. La referencia es Tailwind 3.4, la versión que npm etiqueta como v3-lts, aunque Tailwind no publica una política LTS formal. El motivo principal para elegirla son los navegadores: Tailwind 4 exige Safari 16.4, Chrome 111 o Firefox 128.

Si eliges Tailwind 3.4 Qué ocurre
No tendrás Configuración con @theme, consultas de contenedor sin plugin, not-*, in-*, starting:, 3D, degradados bg-conic, text-shadow-*, mask-*, scrollbar-* y más
Configuras distinto Con tailwind.config.js y content, en lugar de CSS y detección automática
Mismo nombre, otro resultado shadow-sm, rounded-sm, blur-sm, ring, outline-none, la paleta de colores y el orden de las clases
Ganas Compatibilidad con navegadores antiguos, y Sass, Less o Stylus

La guía de versiones reúne todos los apartados afectados, con lo que tienes que hacer en cada caso.

Recursos para descargar

Estructura del curso

El curso se divide en 22 módulos agrupados en 6 bloques:

Bloque 1: Fundamentos (Módulos 00-02)

Módulo Tema Descripción
00 Introducción a Tailwind CSS Qué es Tailwind, versiones y navegadores
01 Instalación y entorno Vite, CLI, PostCSS, CDN y detección de clases
02 Fundamentos: utilidades y Preflight Filosofía, capas, Preflight y valores arbitrarios

Bloque 2: Utilidades (Módulos 03-06)

Módulo Tema Descripción
03 Espaciado y tamaño p-*, m-*, gap-*, w-*, h-* y propiedades lógicas
04 Tipografía Fuentes, tamaños, alineación y text-shadow
05 Color y fondos Paleta oklch, opacidad y degradados
06 Bordes, sombras y efectos Bordes, anillos, sombras, filtros y máscaras

Bloque 3: Maquetación (Módulos 07-10)

Módulo Tema Descripción
07 Layout y posicionamiento display, position, overflow, scrollbar-* y snap-*
08 Flexbox Toda la familia flex con ejemplos visuales
09 CSS Grid Pistas, posiciones, subgrid y diseños completos
10 Diseño responsive Mobile first, puntos de ruptura y consultas de contenedor

Bloque 4: Interacción (Módulos 11-13)

Módulo Tema Descripción
11 Variantes y estados hover, group, peer, has, not, aria y data
12 Modo oscuro y temas dark:, conmutador y temas múltiples
13 Transiciones, animaciones y 3D Transiciones, @keyframes, starting: y 3D

Bloque 5: Personalización (Módulos 14-17)

Módulo Tema Descripción
14 Personalizar el tema @theme, espacios de nombres y marca propia
15 Utilidades y plugins propios @utility, @custom-variant, @plugin y @apply
16 Reutilización y componentes Cuándo extraer, tailwind-merge, cva y tailwind-variants
17 Formularios y tablas @tailwindcss/forms, validación, tablas y <dialog>

Bloque 6: Proyectos reales (Módulos 18-21)

Módulo Tema Descripción
18 Tailwind en React, Angular y otros React, Angular, Next.js, Vue, Svelte y webpack
19 Migración de v3 a v4 Herramienta oficial, cambios y lo que la guía no cuenta
20 Producción y rendimiento Tamaño, CSP, navegadores y accesibilidad
21 Proyecto final Web completa de la tienda EMPRESA, con panel y modo oscuro

Requisitos

  • HTML y CSS
  • Node 20 o superior y un editor (Visual Studio Code recomendado)

Convenciones utilizadas

A lo largo del curso encontrarás estos indicadores:

📘 Concepto: Explicación teórica de un concepto importante.

💻 Ejemplo: Código de ejemplo que puedes copiar y ejecutar.

✏️ Ejercicio: Práctica para que resuelvas por tu cuenta.

⚠️ Importante: Información crucial que debes recordar.

💡 Consejo: Trucos y buenas prácticas profesionales.

Table of contents