Curso de Tailwind CSS

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

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

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

Explora las restricciones de diseño, los valores predeterminados opinados y el sistema de diseño basado en restricciones de Tailwind. 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 estilo utility-first y lo contrasta con los frameworks basados en componentes. Establece la base conceptual para cada decisión sobre 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 de tema. Prepara a los estudiantes para personalizar Tailwind sin romper sus valores predeterminados.

Lección 1 • Utilidades de anchura, altura y dimensionado

Explora las clases de dimensionado fijo, fraccional, relativo a la ventana y basado en el 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 de visibilidad. Los estudiantes controlan la renderizació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, incluyendo abreviaturas y variantes de eje. Los estudiantes aplican espaciado a elementos de interfaz reales con precisión.

Lección 4 • Comprender la escala de espaciado

Cubre la escala de espaciado predeterminada de Tailwind basada en rem y cómo los tokens numéricos se corresponden con valores de píxel. Proporciona el modelo mental necesario para tomar decisiones coherentes sobre márgenes y rellenos.

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 utilizando la escala integrada de Tailwind.

Lección 2 • Tamaño de fuente y altura de línea

Asigna 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 interfaz.

Lección 3 • Personalizar y ampliar los 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 utilidades de tracking, alineación de texto y transformación de texto para un control tipográfico preciso. Los estudiantes perfeccionan títulos y cuerpo de texto según estándares profesionales.

Lección 1 • Construir 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 • Crecimiento, reducción y base flex

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 clases de orden y anulaciones de alineación por elemento para disposiciones flex complejas. 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 la celda independientemente del dimensionado de las pistas.

Lección 2 • Configuración del contenedor grid

Activa el contexto de grid y define plantillas de columna y fila utilizando clases de Tailwind. Los estudiantes comprenden cómo las definiciones de plantilla controlan toda la colocación de los hijos.

Lección 3 • Construir layouts grid reales

Construye un panel de control, una galería de imágenes y un layout de página editorial utilizando 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 columna y fila

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 puntos de ruptura para una estructura adaptativa. Los estudiantes construyen componentes que se reestructuran sin JavaScript.

Lección 2 • Prefijos de punto de ruptura de Tailwind

Cubre los prefijos sm, md, lg, xl y 2xl y sus umbrales de píxel predeterminados. Los estudiantes aplican prefijos de punto de ruptura 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 puntos de ruptura de Tailwind son de anchura mínima. Los estudiantes replantean las decisiones de diseño para comenzar desde la ventana gráfica más pequeña.

Lección 4 • Puntos de ruptura personalizados y configuración de pantallas

Añade puntos de ruptura específicos del proyecto y sobrescribe los valores 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 patrones group-hover y peer-checked para estilos activados por el padre y por el hermano. Los estudiantes construyen menús desplegables y casillas de verificación personalizadas sin JavaScript.

Lección 2 • Variantes de estado de formulario

Aplica 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 utilizando las clases de utilidad integradas de Tailwind. Los estudiantes mejoran la interactividad con movimiento eficiente y compatible con GPU.

Lección 4 • Estados active, visited y disabled

Cubre las variantes active, visited, disabled y placeholder para un estilo completo de formularios y enlaces. Los estudiantes manejan todos los estados interactivos en un flujo de trabajo de única clase de utilidad.

Lección 1 • Valores arbitrarios y variables CSS

Utiliza la notación de corchetes para valores únicos e integra propiedades personalizadas 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 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 interfaz. Los estudiantes entregan temas claros y oscuros completos desde una única hoja de estilo.

Lección 4 • Escribir plugins personalizados de Tailwind

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