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 obtienen 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 con criterio y el sistema de diseño basado en restricciones. Conecta la filosofía con las ganancias prácticas de productividad que los estudiantes experimentarán.

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 las clases de dimensionamiento fijo, fraccional, relativo al viewport y basado en contenido. Los estudiantes dimensionan correctamente contenedores e imágenes en diferentes contextos de layout.

Lección 2 • Utilidades de display y visibilidad

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

Lección 3 • Utilidades de margen y relleno

Enseña las clases de margen y relleno direccionales, incluidas las abreviaturas y las variantes de eje. Los estudiantes aplican espaciado a elementos reales de la interfaz de usuario con precisión.

Lección 4 • Comprendiendo la escala de espaciado

Cubre la escala de espaciado predeterminada 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 tomar 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 de color semánticos. Los estudiantes seleccionan pares de colores accesibles utilizando la escala incorporada de Tailwind.

Lección 2 • Tamaño de fuente e interlineado

Asigna la escala de tamaño de texto de Tailwind a roles tipográficos y explica los valores predeterminados de interlineado asociados. Los estudiantes establecen una jerarquía visual clara en cualquier interfaz de usuario.

Lección 3 • Personalización y extensión de 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 títulos y cuerpo de texto a estándares profesionales.

Lección 1 • Construcción de componentes flex reales

Aplica todas las utilidades flex para construir una barra de navegación, un objeto multimedia 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 flex-grow, flex-shrink y flex-basis y su interacción. Los estudiantes construyen columnas fluidas que se redimensionan de forma predecible bajo diferentes cargas de contenido.

Lección 3 • Utilidades de orden y autoalineación

Enseña las clases de orden y las anulaciones 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 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 las celdas independientemente del dimensionamiento 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. Los estudiantes comprenden cómo las definiciones de plantilla controlan toda la colocación de los elementos hijos.

Lección 3 • Construcción de layouts grid reales

Construye un panel de control, 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 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 ancho mínimo. 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 pantallas

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 un padre o un hermano. 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

Agrega transiciones suaves y animaciones de fotogramas clave utilizando las clases utilitarias integradas de Tailwind. Los estudiantes mejoran la interactividad con movimiento eficiente y compatible con la GPU.

Lección 4 • Estados active, visited y disabled

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

Lección 1 • Valores arbitrarios y variables CSS

Utiliza 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 la salida CSS, configura las rutas de contenido con precisión y aplica patrones de lista segura. Los estudiantes envían la hoja de estilos 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 media query, y aplica variantes dark en toda una interfaz de usuario. Los estudiantes entregan temas claros y oscuros completos desde una sola hoja de estilos.

Lección 4 • Escritura de 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.