NextJs #5 - Cómo dar estilo con Tailwind CSS y modo oscuro paso a paso | Programando sin red

En el capítulo 5 de Programando sin red con NextJS le damos estilo a todo lo que hemos construido, con Tailwind CSS y modo oscuro. Primero montamos una "mesa de operaciones" (una página de pruebas con un botón para cambiar de tema) y luego estilizamos el formulario de login, los campos, el botón de mostrar contraseña, las variantes del botón (primary, secondary y danger) y un menú lateral con sus estados: activa, hover y deshabilitada. Es un capítulo grabado por sesiones. Solo edito para unir las sesiones, así que los fallos tontos y los despistes se quedan. Así se programa de verdad. EN ESTE CAPÍTULO Una mesa de operaciones para trabajar los componentes de forma aislada Flexbox: centrar con justify-center, items-center y min-h-screen Campos con borde de error, foco y modo oscuro Botón con variantes: primary, secondary y danger Menú lateral con usePathname, aria-current y estados activo, hover y deshabilitado 0:00 Intro y botón de cambio de tema 2:06 Ajustes del layout general con Tailwind 3:27 Delimitar el componente de trabajo (max-w y borde rojo) 4:18 Estructura del formulario de login (flex y gap) 5:10 Estilos de los campos: posición e indicación de error 7:40 Foco, modo oscuro y transiciones 11:00 Estilos del botón de mostrar y ocultar contraseña 12:15 Botón: base y variante primary 15:31 Botón secondary y danger 17:26 Tipos y componentes del menú lateral 20:06 Enlace activo con usePathname 23:32 Integración del menú en la mesa de operaciones 26:25 Dimensiones y bordes del sidebar 28:19 Estados activo, inactivo y modo oscuro 32:09 Elementos deshabilitados y cierre CÓDIGO https://github.com/BudzowskiPiotrek/h... #NextJS #TailwindCSS #React #ProgramandoSinRed