CSS moderno y Tailwind para construir UI rápido · Master Laboratory
Programación Web· Principiante· ~5 horas totales
CSS moderno y Tailwind para construir UI rápido
Deja de pelearte con el CSS y construye interfaces rápido y consistentes como se trabaja hoy. Maquetas layouts responsive con Grid, Flexbox y container queries; estilas con utility-first usando Tailwind y design tokens; y construyes un set de componentes accesibles con dark mode. Cierras con tu propio sistema de UI desplegado, listo para usar en React/Next, versionado en un repo de GitHub.
1Maquetas layouts avanzados y responsive con CSS moderno (Grid y Flexbox a escala, container queries) sin hacks ni pelear con floats.
2Estilas con utility-first usando Tailwind y un conjunto de design tokens coherentes (colores, espaciado, tipografía) en lugar de CSS suelto y repetido.
3Construyes componentes reutilizables y accesibles (botón, card, formulario, nav) con estados (hover/focus/active), foco visible y dark mode.
4Decides con criterio entre CSS plano, CSS Modules y utility-first (Tailwind) según el tamaño y el contexto del proyecto, justificando el trade-off.
¿Cómo dejo de pelearme con el CSS y construyo UI rápido, consistente y accesible, como se trabaja hoy con React y Next?
Tu proyecto final
Eres el front-end de un equipo pequeño que necesita una UI consistente para su producto; el resto del equipo va a reutilizar tus componentes.. El producto se monta con React/Next y hoy cada pantalla estila a mano: colores distintos, botones que no se parecen, foco invisible al tabular y nada de dark mode. Necesitáis un set de componentes base coherente, accesible y reutilizable para dejar de reinventar la rueda en cada pantalla.
Entregas: Un mini sistema de UI desplegado: una página demo con al menos cuatro componentes accesibles (botón, card, formulario y nav) construidos con Tailwind, design tokens coherentes (colores, espaciado, tipografía), estados (hover/focus/active), foco visible y dark mode funcional. Responsive verificado, repo en GitHub con commits con criterio y URL pública.
Se evalúa
El layout es responsive y correcto en móvil y escritorio (Grid/Flexbox sin desbordes ni hacks), verificable redimensionando la ventana.imprescindible
El estilo usa Tailwind con design tokens coherentes (paleta, escala de espaciado y tipografía desde el tema, no valores mágicos sueltos) y dark mode funcional con prefers-color-scheme o clase.imprescindible
Los componentes son accesibles: contraste de texto WCAG AA (≥4.5:1), foco visible al tabular (:focus-visible), elementos semánticos y roles correctos; verificable con teclado y un comprobador de contraste.imprescindible
Los componentes son reutilizables y forman un sistema coherente (mismos tokens, variantes claras, sin muro de clases duplicado): se nota que es un set, no cuatro piezas sueltas.
Cómo progresas
M1aplicar
CSS moderno a escala
M2aplicar
Tailwind utility-first
M3crear
Componentes accesibles y tu sistema de UI
Responsive de verdad: media y container queries
Aplicar mobile-first con media queries y container queries para que un componente se adapte a su contenedor, no solo a la pantalla.