Adaptar una interfaz móvil a su versión web es uno de los pasos más importantes en el desarrollo frontend. Aquí se trabaja directamente sobre un proyecto real en Tailwind CSS, utilizando el prefijo lg (large) para controlar qué elementos se muestran, ocultan o transforman cuando la pantalla alcanza el breakpoint de escritorio. Todo parte de un diseño en Figma que marca las diferencias entre ambas versiones.
¿Qué cambia entre la versión móvil y la versión web en Figma?
Antes de tocar una sola línea de código, se revisa el diseño en Figma para identificar con precisión los elementos que se modifican [0:06]. Los cambios principales son:
- La tabbar desaparece y se reemplaza por una navbar en la versión web.
- La imagen del hero se mantiene, pero el searchbar (input de búsqueda) se oculta.
- Aparece un nuevo texto: "Encuentra más ubicaciones como esta".
- El botón de explorar permanece, pero cambia su posición.
- La sección de rentas destacadas modifica su comportamiento dentro de Flexbox, agregando divs adicionales para manipular el layout.
- Las secciones de recomendaciones, FAQs y footer se adaptan sin cambios significativos.
El concepto de breakpoint es fundamental: se trata del punto en el que el diseño cambia según el ancho de la pantalla. En Tailwind CSS, el prefijo lg aplica estilos únicamente cuando la ventana alcanza el tamaño large (1024px por defecto).
¿Cómo ocultar elementos para la versión web con Tailwind?
El primer paso práctico es esconder la tabbar en pantallas grandes [1:37]. Para esto se agrega la clase lg:hidden al contenedor de la tabbar, lo que la hace invisible en el breakpoint large sin afectar la versión móvil.
El mismo patrón se aplica a otros elementos:
- La imagen móvil del hero recibe
lg:hidden para que no se renderice en escritorio [2:24].
- El input de búsqueda también se oculta con
lg:hidden [2:55].
Esta técnica de visibilidad condicional es clave en el diseño responsivo con Tailwind: defines el comportamiento base para móvil y luego agregas modificaciones con el prefijo del breakpoint correspondiente.
¿Cómo se cambia la imagen de fondo para escritorio?
En lugar de la imagen móvil, se configura una imagen de fondo diferente para la versión web [3:15]. Se trabaja sobre el div contenedor, agregando:
lg:h-96 para definir la altura.lg:bg-sanFranciscoDesktop como referencia a la imagen configurada en el archivo tailwind.config.lg:bg-cover para que la imagen cubra todo el contenedor.lg:bg-center para centrarla correctamente.
Es importante verificar que el nombre de la imagen coincida con el registrado en el archivo de configuración de Tailwind. Cualquier error de referencia impide que el background se muestre [3:48].
¿Cómo se reposiciona el botón de explorar?
El botón de explorar necesita reubicarse en la versión web [4:30]. Se le agrega lg:ml-16 (margin-left) para desplazarlo horizontalmente. Además, en el div padre se ajustan varias propiedades:
lg:items-start y lg:justify-start para alinear los elementos al inicio.- Se elimina el espaciado horizontal (
lg:px-0) que no aplica en web.
- Se agrega
lg:pt-56 (padding-top) para separarlo verticalmente de la imagen.
Durante este proceso se detectó un typo en las clases que impedía el funcionamiento correcto [5:35]. Revisar las clases con cuidado es una práctica esencial al trabajar con utilidades de Tailwind.
¿Cómo agregar contenido exclusivo para la versión web?
Se crea un nuevo div con el texto "Encuentra más ubicaciones como esta" que solo es visible en escritorio [7:05]. La estrategia es:
- El div se declara con
hidden por defecto (oculto en móvil).
- Se activa con
lg:flex para que aparezca únicamente en pantallas grandes.
- Se le asigna un ancho de
lg:w-2/5 para controlar cuánto espacio ocupa.
Al párrafo interior se le aplican estilos como text-4xl, font-bold y ml-16. El ancho del contenedor determina cómo se comporta el texto: al reducir de w-2/3 a w-2/5, el texto se ajusta y se posiciona mejor respecto a la imagen de fondo [9:18].
Un detalle práctico: el color del texto se deja en negro porque no todas las imágenes de fondo permiten que el texto blanco sea legible. La legibilidad siempre debe tener prioridad sobre la estética [8:52].
Queda pendiente la construcción de la navbar y los ajustes finales de las secciones restantes, elementos que se abordan en la siguiente iteración del proyecto. Si estás siguiendo este proceso, experimenta con los valores de padding y width para entender cómo cada cambio afecta el layout responsivo.
