Tailwind CSS

• Desarrolladores frontend que buscan dominar Tailwind CSS en profundidad
• Diseñadores web que necesitan implementar diseños complejos de forma eficiente
• Desarrolladores fullstack que quieren crear interfaces de usuario profesionales
• Estudiantes de programación con conocimientos básicos de HTML y CSS
• Profesionales que necesitan actualizar sus conocimientos de Tailwind CSS

Requisitos previos: conocimientos fundamentales de HTML y CSS. No es necesaria experiencia previa con frameworks CSS.

Introducción e instalación

• Introducción a Tailwind CSS: filosofía, ecosistema y ventajas del enfoque utility-first
• Instalación y configuración: integración con Vite, PostCSS y CDN

Fundamentos y responsive

• Sistema utility-first: principios de composición de clases y diseño modular
• Configuración CSS-first: directiva @theme, tokens de diseño como variables CSS y personalización del tema
• Diseño responsive: breakpoints, mobile-first, rangos de breakpoints

Clases de utilidad

• Tipografía y fuentes: familias, tamaños, pesos, alturas de línea y decoraciones
• Dimensionado: anchos, altos, tamaños mínimos y máximos
• Espaciado y alineación: márgenes, paddings, espaciado entre elementos y alineación
• Colores y fondos: paleta OKLCH con gama P3, opacidad y personalización de colores
• Bordes: grosor, radio, estilo y utilidades de contorno
• Estados e interactividad: hover, focus, active, disabled, not-* y variantes de grupo
• Transiciones y animaciones: transiciones suaves, keyframes, @starting-style y auto-transition
• Dark mode: variante dark:, color-scheme y alternancia manual

Layout

• Contenedores y columnas: estructura de contenido y sistema de columnas
• Flexbox: layouts flexibles con flex, justify, items y gap
• Grid: rejillas con grid-cols, grid-rows, col-span y gap
• Container queries: diseño responsive basado en el contenedor con @container

Efectos visuales

• Degradados: gradientes lineales, radiales y cónicos con from/via/to
• Sombras: shadow, inset-shadow, text-shadow y ring
• Filtros y efectos: blur, backdrop-filter, opacidad y mix-blend-mode
• Transformaciones 3D: perspective, rotate-x/y/z, translate-z y backface-visibility

Personalización y componentes

• Personalización avanzada del tema: @theme en profundidad, @source, @plugin y tokens de diseño
• Componentes con @apply: extracción de patrones, plugins personalizados y reutilización
• Formularios y accesibilidad: estilizado de formularios, field-sizing, inert y variantes ARIA

Evaluación y proyectos

• Evaluación de conocimientos: test y ejercicio de código para verificar el aprendizaje
• Proyectos integradores: layout con grid y formulario, blog de artículos y landing page completa

Al completar este curso serás capaz de:

• Instalar y configurar Tailwind CSS con Vite, PostCSS o CLI
• Personalizar el tema usando la directiva @theme y variables CSS nativas
• Aplicar todas las clases de utilidad del framework con fluidez
• Crear layouts complejos con Flexbox, Grid y container queries
• Implementar efectos visuales con degradados, sombras, filtros y transformaciones 3D
• Diseñar interfaces responsive adaptadas a cualquier dispositivo
• Gestionar dark mode y estados interactivos de forma profesional
• Extraer componentes reutilizables con @apply y plugins
• Construir interfaces accesibles siguiendo buenas prácticas con variantes ARIA