Inicio
Curso de Tailwind CSS
Curso práctico de Tailwind CSS: utilidades, layout responsive, componentes y flujo profesional utility-first.
Tests
Pon a prueba tus conocimientos de Tailwind CSS.
Lecciones
16
1
Fundamentos
Tailwind desde cero: setup con CDN y enfoque utility-first
Aprende a arrancar con Tailwind de forma práctica, entendiendo su filosofía utility-first y montando una demo funcional con CDN.
2 Fundamentos
Colores, tipografía y espaciado: los cimientos visuales
Domina las utilidades básicas de Tailwind para construir jerarquía visual con color, texto y spacing sin escribir CSS adicional.
3 Layout
Layout responsive con Flex y Grid en Tailwind
Aprende a construir estructuras adaptables combinando flexbox, grid y breakpoints con utilidades claras y mantenibles.
4 Layout
Spacing, sizing y contenedores con criterio profesional
Aprende a controlar ancho, alto, padding y márgenes para construir bloques limpios y consistentes con Tailwind.
5 Layout
Posicionamiento y capas: relative, absolute, sticky, fixed, z-index y overflow
Aprende a controlar capas, anclajes y recorte de contenido con utilidades de posicionamiento en Tailwind.
6 Componentes
Variantes y estados: hover, focus y feedback real
Aprende a diseñar estados de interacción en Tailwind para que botones y enlaces respondan bien al usuario.
7 Componentes
Componentes base: cards y badges reutilizables
Construye patrones de UI comunes con Tailwind manteniendo consistencia visual y buena escalabilidad.
8 Componentes
Formularios con Tailwind: UX clara y accesible
Diseña inputs, labels y mensajes de error con Tailwind para que el formulario se entienda y se use sin fricción.
9 Layout
Navbar responsive con Tailwind
Construye una barra de navegación adaptable con utilidades de spacing, alineación y breakpoints en Tailwind.
10 Componentes
Tablas y bloques de datos en dashboards
Diseña tablas legibles y paneles de datos con Tailwind manteniendo jerarquía visual, contraste y scroll usable.
11 Componentes
Efectos con Tailwind: transiciones y transform sin caos
Aplica transiciones, escalado y desplazamiento con criterio para mejorar percepción de calidad en la interfaz.
12 Componentes
Variantes avanzadas con group y peer
Aprende a sincronizar estados entre elementos usando group y peer para construir componentes más inteligentes.
13 Pro
Dark mode en Tailwind: estrategia y consistencia
Aprende a plantear modo oscuro de forma mantenible con utilidades y variantes dark: sin duplicar diseño.
14 Pro
Escalar diseño con theme extend: colores, fuentes y tokens
Aprende a extender el tema de Tailwind para crear un sistema visual propio y mantener consistencia en proyectos reales.
15 Pro
Rendimiento en producción: content, purge y build limpio
Entiende cómo optimizar Tailwind en producción para generar solo las clases necesarias y evitar CSS inflado.
16 Pro
Proyecto final: landing profesional con Tailwind
Integra utilidades, layout responsive, componentes y estados en una landing completa lista para portfolio.
No hay lecciones para este filtro.
Página 1 de 1
Roadmap
Desarrollo Web
Ruta principal de frontend, frameworks y stack de desarrollo web profesional.
UI y estilos