Adaptar una landing de móvil a web con Tailwind implica decidir qué elementos ocultas, cuáles reposicionas y cuáles reemplazas por versiones específicas para escritorio. Aquí verás cómo aplicar el breakpoint lg de Tailwind para transformar una vista móvil en una versión web sin romper lo que ya funciona, ideal si estás aprendiendo diseño responsive con utilidades.

Qué cambia entre la versión móvil y la versión web

Antes de tocar código, conviene mapear las diferencias en Figma. En este proyecto, el salto a escritorio implica varios ajustes visuales claros [1:00].

• La tabbar móvil se reemplaza por una navbar superior.
• La imagen principal se mantiene, pero sin el search bar encima.
• Aparece un texto nuevo: Encuentra más ubicaciones como esta.
• El botón explorar conserva su estilo, pero cambia de posición.
• Las secciones de recomendaciones, FAQs y footer casi no se modifican.
• El comportamiento de flexbox cambia en algunas tarjetas, agregando divs extra para controlar el layout.

Esa lectura previa ahorra tiempo: sabes exactamente qué clases agregar y dónde.

Cómo ocultar la tabbar y el search bar en lg con Tailwind

El primer paso es esconder los elementos que no pertenecen a la vista web. Tailwind permite hacerlo con la clase lg:hidden, que aplica display: none a partir del breakpoint large [2:05].

¿Qué hace lg:hidden en Tailwind? Oculta un elemento solo en pantallas grandes (1024px o más por defecto), manteniéndolo visible en móvil y tablet.

La misma lógica se aplica al input de búsqueda. Al final de sus clases agregas lg:hidden y desaparece en escritorio sin afectar la versión móvil. Mantener este orden, con los modificadores responsive al final, ayuda a leer el código después.

Reemplazar la imagen móvil por una versión desktop

El div que contiene la imagen hero recibe nuevas propiedades específicas para lg. Se le asigna una altura, una imagen distinta optimizada para escritorio y propiedades de background [4:30].

• lg:h-96 define la altura del contenedor en pantallas grandes.
• lg:bg-[url('san-francisco-desktop')] carga la imagen específica para web.
• lg:bg-cover hace que la imagen llene el contenedor sin deformarse.
• lg:bg-center centra el background dentro del div.

La imagen San Francisco desktop es una variante del archivo móvil, ajustada en proporciones. El resto de imágenes del proyecto se reutilizan tal cual.

Cómo reposicionar el botón explorar en escritorio

En móvil, el botón vive centrado bajo el search bar. En web debe quedar alineado a la izquierda, sobre la imagen hero. Para lograrlo se trabaja sobre el div contenedor del input y el botón [7:45].

Las clases que entran en juego son lg:space-x-0 para eliminar el espaciado horizontal heredado, lg:items-start y lg:justify-start para anclar el contenido al inicio, y lg:pt-14 para separarlo del borde superior. Al botón mismo se le agrega lg:ml-16 para empujarlo hacia adentro desde la izquierda.

¿Por qué usar space-y y no space-x aquí? Porque el contenedor apila sus hijos en eje vertical. Si aplicas space-x, no verás cambios y el botón parecerá invisible.

Este detalle confunde a muchos: revisar el eje correcto del spacing evita perder minutos buscando un bug que no existe.

Cómo agregar el texto Encuentra más ubicaciones solo en web

Debajo del input se inserta un nuevo div que por default está oculto y solo aparece en lg. La estructura es directa [12:20].

• El contenedor usa hidden lg:flex para mostrarse únicamente en escritorio.
• Se le da lg:w-2/5 para limitar su ancho a dos quintos del espacio disponible.
• Adentro va una etiqueta p con el texto Encuentra más ubicaciones como esta.
• Al texto se le aplica text-4xl, font-bold y ml-16 para alinearlo con el botón.

El ancho 2/5 permite que el texto se acomode en varias líneas siguiendo el contenedor, lo que crea un bloque tipográfico más legible que ocupar toda la fila.

Por qué el color del texto importa sobre imágenes

Leer texto sobre una imagen hero depende del contraste. Probar text-white puede funcionar en algunas zonas, pero si la imagen tiene áreas claras, el texto se pierde. En este caso, ajustar la posición vertical y dejar el texto en negro resultó más legible [16:40].

Es un recordatorio práctico: el color del copy sobre imágenes no es decorativo, es funcional.

Qué clases responsive de Tailwind se usaron en este flujo

Resumiendo las utilidades aplicadas para llevar el proyecto a web sin romper móvil:

1. lg:hidden para ocultar tabbar, search bar y la imagen móvil.
2. lg:h-96, lg:bg-cover, lg:bg-center para la nueva imagen hero desktop.
3. lg:ml-16, lg:pt-14, lg:items-start, lg:justify-start para reposicionar el botón.
4. hidden lg:flex, lg:w-2/5 para mostrar el texto editorial solo en web.

Con estas piezas, la base de la versión web queda funcional. Falta sumar la navbar superior y pulir secciones intermedias, lo que se trabaja en la siguiente clase.

¿Qué clase de Tailwind te ha costado más entender al hacer responsive? Cuéntame en los comentarios qué breakpoint sueles usar primero cuando empiezas a adaptar tu layout.