Crear una tab bar fija con Tailwind CSS es la pieza que conecta cada sección de tu landing page móvil con un solo toque. Aquí construyes una barra inferior con íconos SVG funcionales que redirigen mediante anclas, todo pensado para quienes ya manejan utilidades de Tailwind y quieren cerrar un proyecto responsive real.

¿Qué hace una tab bar en una landing page móvil?

La tab bar vive en la parte inferior de la pantalla y agrupa los accesos rápidos a las secciones más visitadas. En el diseño del proyecto incluye cinco íconos con roles distintos.

• Home para volver al inicio.
• Search o explorar, que lleva a las rentas destacadas.
• Corazón para recomendaciones.
• Luna que activará el dark mode más adelante.
• Usuario, que queda como reto abierto para que tú construyas la pantalla con plugins como Forms de Tailwind.

¿Qué es una tab bar? Es una barra de navegación fija, generalmente en la parte inferior, que muestra íconos para saltar entre secciones clave de una app o sitio móvil sin perder contexto.

¿Cómo fijar la tab bar al fondo con Tailwind?

Lo primero es mover el bloque de la tab bar desde arriba del body hasta debajo del footer, porque visualmente debe quedar anclada al fondo. Luego le aplicas las clases que la mantienen pegada sin importar el scroll.

Las utilidades clave son fixed, left-0, bottom-0, width full y height-16. Con eso la barra se queda quieta mientras el resto del contenido se desplaza.

html

<nav class="fixed left-0 bottom-0 w-full h-16 bg-white shadow-md"> <a href="#home">...</a> </nav>

El shadow-md añade una sombra ligera que la separa del contenido y bg-white define el fondo. Si quieres validar la posición rápido, cambia temporalmente a bg-blue-700 y revisa que se mantenga abajo al hacer scroll.

¿Cómo distribuir los íconos con flexbox?

Dentro de la tab bar, los íconos deben repartirse en línea y centrarse vertical y horizontalmente. Aquí entra el poder de flexbox en Tailwind.

• space-x-4 agrega separación horizontal entre cada <a>.
• items-center centra los íconos en el eje vertical.
• justify-center los alinea en el eje horizontal.
• Un padding adicional da aire a los bordes.

Gracias a estas clases, cada ícono nuevo que añadas hereda el espaciado sin que tengas que recalcular nada.

¿Cómo hacer que los íconos naveguen a cada sección?

Cada ícono se envuelve en una etiqueta <a> con un href que apunta al id de la sección destino. Por eso los id que definiste en los div de tu landing cobran sentido aquí.

html <a href="#home"><svg>...</svg></a> <a href="#recomendados"><svg>...</svg></a>

Un detalle común: si nombraste tu sección recomendados y en el href escribes destacadas, el salto no funciona. Verifica que el id y el href coincidan exactamente.

¿Cómo se enlaza un ícono a una sección con HTML? Envuelve el ícono en una etiqueta <a> y usa href="#idDeLaSeccion". El navegador hará scroll automático a ese bloque.

¿Cómo cambiar el color de un SVG con Tailwind?

Los SVG no se pintan con bg ni text directamente. Para teñirlos necesitas dos piezas trabajando juntas.

• En el path del SVG agregas la clase fill-current.
• En el contenedor o el propio SVG defines el color con text-gray-200, text-primary o el token que uses.

La clase fill-current le dice al SVG que use el color de texto heredado. Por eso, si el ícono activo debe verse resaltado, le pasas text-primary, mientras que los inactivos llevan text-gray-200. Esto solo funciona con SVG inline; si usaras imágenes PNG, el truco no aplica.

También conviene unificar el tamaño con width y height de 30 para que ningún ícono se vea desproporcionado respecto a los demás.

¿Qué íconos quedan listos y cuáles son retos?

Al terminar tienes home, search, corazón, luna y usuario alineados en la barra. Los enlaces de home, search y corazón saltan a sus secciones respectivas usando los id del proyecto.

La luna no usa href sino una etiqueta <button>, porque será cliqueable para alternar el dark mode en una clase posterior. El ícono de usuario se queda sin destino: ese es tu reto para crear una pantalla de perfil con lo que ya sabes de Tailwind.

Con esto cierras el diseño móvil completo. ¿Te animas a construir la pantalla de usuario y compartir tu versión en los comentarios?