Construye una barra de navegación adaptable con utilidades de spacing, alineación y breakpoints en Tailwind.
Una navbar profesional debe mantenerse clara tanto en móvil como en escritorio.
Con Tailwind puedes empezar con un layout vertical en móvil y cambiar a horizontal desde md sin reescribir componentes.
La clave está en combinar flex, spacing y visibilidad por breakpoints de forma explícita.
En esta lección montarás una navbar base que puedes reutilizar en proyectos reales.
Separa logo, enlaces y acción principal para que cada parte tenga función clara.
En móvil puedes apilar elementos con flex-col y separarlos con gap.
En escritorio cambia a md:flex-row para distribuir horizontalmente.
Mantén paddings consistentes para evitar que la barra parezca comprimida.
Mobile-first: define primero móvil y luego expande con prefijos.
Hover y focus visibles mejoran navegación y accesibilidad.
Añade hover:text-white a enlaces secundarios para feedback inmediato.
En botones usa focus-visible:ring para usuarios de teclado.
Evita cambios de color extremos que rompan contraste en fondo oscuro.
Construye una barra de navegación adaptable con utilidades de spacing, alineación y breakpoints en Tailwind.
Código del tema: class="grid md:grid-cols-2 lg:grid-cols-3 gap-6"
Separa logo, enlaces y acción principal para que cada parte tenga función clara.
En móvil puedes apilar elementos con flex-col y separarlos con gap.
En escritorio cambia a md:flex-row para distribuir horizontalmente.
Mantén paddings consistentes para evitar que la barra parezca comprimida.
Mobile-first: define primero móvil y luego expande con prefijos.
Hover y focus visibles mejoran navegación y accesibilidad.
Añade hover:text-white a enlaces secundarios para feedback inmediato.
En botones usa focus-visible:ring para usuarios de teclado.
Evita cambios de color extremos que rompan contraste en fondo oscuro.