Curso de Tailwind CSS

Lección 1 • Instalación y Configuración de Tailwind

Recorre la instalación por CLI, la integración con PostCSS y el uso por CDN. Los estudiantes generan un entorno local funcional listo para todos los ejercicios posteriores.

Lección 2 • Filosofía Central de Tailwind CSS

Explora las restricciones de diseño de Tailwind, sus valores predeterminados opinados y su sistema de diseño basado en restricciones. Conecta la filosofía con las ganancias prácticas de productividad que experimentarán los estudiantes.

Lección 3 • Qué Es el CSS Utility-First

Define el estilizado utility-first y lo contrasta con los frameworks basados en componentes. Establece la base conceptual para cada decisión de Tailwind que se tome a lo largo del curso.

Lección 4 • El Archivo de Configuración de Tailwind

Presenta la estructura de tailwind.config.js, las rutas de contenido y las claves del tema. Prepara a los estudiantes para personalizar Tailwind sin romper sus valores predeterminados.

Lección 1 • Utilidades de Ancho, Alto y Dimensionamiento

Explora clases de tamaño fijo, fraccional, relativo al viewport y basado en contenido. Los estudiantes dimensionan contenedores e imágenes correctamente en diferentes contextos de layout.

Lección 2 • Utilidades de Display y Visibilidad

Cubre las clases block, inline, flex, grid, hidden y visibility. Los estudiantes controlan la representación de elementos y las técnicas de ocultación seguras para accesibilidad.

Lección 3 • Utilidades de Margen y Relleno

Enseña las clases de margen y relleno direccionales, incluyendo atajos y variantes de eje. Los estudiantes aplican espaciado a elementos reales de UI con precisión.

Lección 4 • Entendiendo la Escala de Espaciado

Cubre la escala de espaciado predeterminada de Tailwind basada en rem y cómo los tokens numéricos se mapean a valores de píxeles. Proporciona el modelo mental necesario para decisiones consistentes de margen y relleno.

Lección 1 • Fundamentos de la Paleta de Colores de Tailwind

Presenta la estructura de la paleta predeterminada, la numeración de tonos y los roles semánticos del color. Los estudiantes seleccionan pares de colores accesibles usando la escala incorporada de Tailwind.

Lección 2 • Tamaño de Fuente y Altura de Línea

Mapea la escala de tamaño de texto de Tailwind a roles tipográficos y explica los valores predeterminados de altura de línea emparejados. Los estudiantes establecen una jerarquía visual clara en cualquier UI.

Lección 3 • Personalizar y Extender Colores

Demuestra cómo añadir colores de marca, variables CSS y alias semánticos en la configuración. Los estudiantes mantienen un sistema de color escalable en proyectos grandes.

Lección 4 • Espaciado entre Letras y Alineación de Texto

Enseña las utilidades de tracking, text-align y text-transform para un control tipográfico fino. Los estudiantes pulen encabezados y cuerpo de texto a estándares profesionales.

Lección 1 • Construyendo Componentes Flex Reales

Aplica todas las utilidades flex para construir una barra de navegación, un objeto de medios y un layout de pie de página. Los estudiantes consolidan el conocimiento de flex mediante la construcción práctica de componentes.

Lección 2 • Flex Grow, Shrink y Basis

Explica las utilidades de flex-grow, flex-shrink y flex-basis y su interacción. Los estudiantes construyen columnas fluidas que se redimensionan predeciblemente bajo diferentes cargas de contenido.

Lección 3 • Utilidades de Orden y Autoalineación

Enseña las clases de order y las sobrescrituras de alineación por elemento para arreglos flex complejos. Los estudiantes reordenan elementos visuales sin cambiar la estructura del DOM.

Lección 4 • Alineación y Justificación

Cubre las utilidades de justify-content, align-items, align-self y align-content. Los estudiantes centran, distribuyen y estiran elementos con precisión en cualquier layout flex.

Lección 1 • Alineación Dentro de Grid

Aplica justify-items, align-items, justify-self y align-self dentro del contexto de grid. Los estudiantes posicionan el contenido de la celda independientemente del tamaño de la pista.

Lección 2 • Configuración del Contenedor Grid

Activa el contexto grid y define las plantillas de columnas y filas usando clases de Tailwind. Los estudiantes entienden cómo las definiciones de plantilla controlan toda la ubicación de los hijos.

Lección 3 • Construyendo Layouts Grid Reales

Construye la estructura de un dashboard, una galería de imágenes y un layout de página editorial usando utilidades grid. Los estudiantes aplican el conocimiento de grid a estructuras de página con calidad de producción.

Lección 4 • Expansión de Columnas y Filas

Cubre las utilidades col-span, row-span y full-span para colocar elementos a través de múltiples pistas. Los estudiantes crean layouts asimétricos que rompen el patrón de cuadrícula uniforme.

Lección 1 • Cambio de Layout Responsivo

Alterna entre layouts flex y grid en diferentes breakpoints para una estructura adaptativa. Los estudiantes construyen componentes que se reestructuran a sí mismos sin JavaScript.

Lección 2 • Prefijos de Breakpoint de Tailwind

Cubre los prefijos sm, md, lg, xl y 2xl y sus umbrales de píxeles predeterminados. Los estudiantes aplican prefijos de breakpoint a cualquier clase utilitaria con confianza.

Lección 3 • Principios de Diseño Mobile-First

Establece el pensamiento mobile-first y explica por qué los breakpoints de Tailwind son de min-width. Los estudiantes replantean las decisiones de diseño para comenzar desde el viewport más pequeño.

Lección 4 • Breakpoints Personalizados y Configuración de Screens

Añade breakpoints específicos del proyecto y sobrescribe los predeterminados en la clave de configuración screens. Los estudiantes adaptan el sistema responsivo de Tailwind a cualquier especificación de diseño.

Lección 1 • Variantes de Grupo y Par

Enseña los patrones group-hover y peer-checked para estilos activados por el padre y por hermanos. Los estudiantes construyen menús desplegables y casillas de verificación personalizadas sin JavaScript.

Lección 2 • Variantes de Estado de Formulario

Aplica las variantes required, invalid, valid y checked para estilizar los estados de validación de formularios. Los estudiantes proporcionan retroalimentación visual clara para la entrada del usuario sin CSS personalizado.

Lección 3 • Utilidades de Transición y Animación

Añade transiciones suaves y animaciones de fotogramas clave usando las clases utilitarias integradas de Tailwind. Los estudiantes mejoran la interactividad con movimiento eficiente y amigable con la GPU.

Lección 4 • Estados Active, Visited y Disabled

Cubre las variantes active, visited, disabled y placeholder para un estilizado completo de formularios y enlaces. Los estudiantes manejan todos los estados interactivos en un solo flujo de trabajo de clases utilitarias.

Lección 1 • Valores Arbitrarios y Variables CSS

Usa la notación de corchetes para valores únicos e integra propiedades personalizadas de CSS en las utilidades. Los estudiantes escapan de la escala predeterminada cuando las especificaciones de diseño exigen precisión.

Lección 2 • Rendimiento y Optimización del Paquete

Audita el tamaño de salida del CSS, configura rutas de contenido con precisión y aplica patrones de lista segura. Los estudiantes envían la hoja de estilo más pequeña posible sin sacrificar el uso dinámico de clases.

Lección 3 • Implementación del Modo Oscuro

Configura el modo oscuro basado en clase y en medios y aplica variantes dark en toda una UI. Los estudiantes entregan temas claros y oscuros completos desde una sola hoja de estilo.

Lección 4 • Escribir Plugins Personalizados de Tailwind

Construye plugins de utilidad, componente y variante personalizados usando la API de plugins de Tailwind. Los estudiantes extienden las capacidades de Tailwind para satisfacer los requisitos únicos de cualquier proyecto.