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 desde CDN. Quienes cursan 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 defaults opinados y el sistema de diseño basado en restricciones. Conecta la filosofía con las ganancias prácticas de productividad que experimentarán quienes cursen.

Lección 3 • Qué es CSS utility-first

Define el estilado 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

Introduce la estructura de tailwind.config.js, las rutas de contenido y las claves de tema. Prepara a quienes cursan para personalizar Tailwind sin romper sus defaults.

Lección 1 • Utilidades de ancho, alto y tamaño

Explora las clases de tamaño fijo, fraccional, relativo al viewport y basado en contenido. Quienes cursan 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 de visibilidad. Quienes cursan controlan la renderización de elementos y técnicas de ocultación seguras para accesibilidad.

Lección 3 • Utilidades de margin y padding

Enseña las clases direccionales de margin y padding, incluyendo variantes abreviadas y de eje. Quienes cursan aplican espaciado a elementos reales de UI con precisión.

Lección 4 • Entendiendo la escala de espaciado

Cubre la escala de espaciado por defecto de Tailwind basada en rem y cómo los tokens numéricos se asignan a valores de píxeles. Proporciona el modelo mental necesario para decisiones coherentes de margin y padding.

Lección 1 • Fundamentos de la paleta de colores de Tailwind

Introduce la estructura de la paleta por defecto, la numeración de tonos y los roles semánticos de color. Quienes cursan seleccionan pares de color accesibles usando la escala incorporada de Tailwind.

Lección 2 • Tamaño de fuente y line height

Mapea la escala de tamaño de texto de Tailwind a roles tipográficos y explica los defaults de line height emparejados. Quienes cursan 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. Quienes cursan mantienen un sistema de color escalable en proyectos grandes.

Lección 4 • Letter spacing y alineación de texto

Enseña las utilidades de tracking, text-align y text-transform para un control tipográfico fino. Quienes cursan pulen títulos y cuerpo de texto a estándares profesionales.

Lección 1 • Construir componentes reales con flex

Aplica todas las utilidades de flex para construir una barra de navegación, un objeto de medios y un layout de pie de página. Quienes cursan 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. Quienes cursan construyen columnas fluidas que se redimensionan de forma predecible bajo diferentes cargas de contenido.

Lección 3 • Utilidades de order y self-alignment

Enseña las clases de orden y las sobrescrituras de alineación por ítem para arreglos flex complejos. Quienes cursan 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. Quienes cursan 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. Quienes cursan posicionan el contenido de las celdas independientemente del tamaño de las pistas.

Lección 2 • Configuración del contenedor Grid

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

Lección 3 • Construir layouts reales con Grid

Construye una carcasa de dashboard, una galería de imágenes y un layout de página editorial usando utilidades de grid. Quienes cursan 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 ubicar elementos a lo largo de múltiples pistas. Quienes cursan crean layouts asimétricos que rompen el patrón uniforme de la grilla.

Lección 1 • Cambio de layout responsivo

Alterna entre layouts de flex y grid en diferentes breakpoints para una estructura adaptativa. Quienes cursan construyen componentes que se reestructuran 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 por defecto. Quienes cursan aplican prefijos de breakpoint a cualquier clase de utilidad 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 min-width. Quienes cursan 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

Agrega breakpoints específicos del proyecto y sobrescribe los defaults en la clave de configuración screens. Quienes cursan 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 disparados por el padre y por el hermano. Quienes cursan construyen menús desplegables y checkboxes personalizados 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. Quienes cursan proporcionan una respuesta visual clara para la entrada del usuario sin CSS personalizado.

Lección 3 • Utilidades de transición y animación

Agrega transiciones suaves y animaciones de keyframes usando las clases de utilidad incorporadas de Tailwind. Quienes cursan 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 estilado completo de formularios y enlaces. Quienes cursan manejan todos los estados interactivos en un flujo de trabajo de clases de utilidad único.

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. Quienes cursan escapan de la escala por defecto cuando las especificaciones de diseño exigen precisión.

Lección 2 • Rendimiento y optimización del bundle

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

Lección 3 • Implementación de modo oscuro

Configura el modo oscuro basado en clase y en media query y aplica variantes dark en toda una UI. Quienes cursan entregan temas completos claros y oscuros desde una sola hoja de estilos.

Lección 4 • Escribir plugins personalizados de Tailwind

Construye utilidades, componentes y plugins de variante personalizados usando la API de plugins de Tailwind. Quienes cursan extienden las capacidades de Tailwind para ajustarse a los requisitos únicos de cualquier proyecto.