Antes de escribir una sola línea de código, conviene mirar el diseño y decidir dónde usar Flexbox y dónde usar Grid en Tailwind CSS. Esa decisión define qué tan limpio queda tu layout y cuánto te peleas después con el responsive. Aquí te muestro cómo leer un archivo de Figma para identificar los contenedores correctos antes de maquetar.

¿Cómo se identifica el layout en Figma antes de maquetar?

La idea es simple: mirar cada bloque del diseño y preguntarte cómo se comportan los hijos dentro de él. ¿Van uno al lado del otro? ¿Uno debajo del otro? Esa observación te dice qué flex-direction usar.

En la versión móvil del proyecto, las tarjetas superiores se acomodan una al lado de la otra con un espaciado consistente, así que ese contenedor pide un flex-direction row. Más abajo, los elementos se apilan verticalmente, lo que se traduce en un flex-direction column.

¿Cuándo uso flex row y cuándo flex column? Usa row cuando los elementos van uno al lado del otro en una fila horizontal. Usa column cuando se apilan verticalmente, uno debajo del otro.

¿Por qué empezar por la paleta de colores?

El proyecto define cinco colores principales con su valor hexadecimal correspondiente. Tenerlos claros desde el inicio te permite, más adelante, personalizar la paleta dentro del archivo de configuración de Tailwind sin romper tu maquetación.

¿Cómo cambia el layout entre mobile y desktop?

Tailwind es 100% responsivo, así que el mismo diseño se comporta distinto en desktop. La fila superior de tarjetas mantiene su flex-direction: row, pero la sección inferior deja de verse como simples filas y columnas. Ahí es donde el árbol de contenedores se vuelve más interesante.

Para resolverlo, conviene pensar en divs anidados. El contenedor principal funciona como columna; dentro vive un div que organiza a sus hijos en fila; y dentro de cada uno de esos hijos, los elementos vuelven a apilarse en columna.

¿Cómo se anidan los contenedores flex?

La receta es ir de afuera hacia adentro y nombrar cada nivel:

• Contenedor principal blanco con dirección column.
• Segundo nivel con dirección row, donde viven dos tarjetas lado a lado.
• Tercer nivel, dentro de una de esas tarjetas, vuelve a column para apilar dos sub elementos.
• Cada sub elemento puede contener, a su vez, otra columna interna.

Este ejercicio de pintar flechas sobre el Figma y cambiar colores de fondo (blanco, gris más oscuro) es lo que te permite no perderte cuando empieces a escribir clases utilitarias.

¿Flexbox o Grid para este proyecto? Flexbox basta cuando los elementos fluyen en una sola dirección por contenedor. Grid se vuelve útil cuando necesitas controlar filas y columnas a la vez en una misma capa.

¿Cómo decidir entre Flexbox y Grid en Tailwind?

La pista está en la complejidad del bloque. Si puedes describir un contenedor con una sola palabra, row o column, Flexbox es tu mejor aliado. Cuando un mismo contenedor necesita alinear elementos en dos ejes simultáneamente, Grid te ahorra anidar divs extra.

En este proyecto, la mayoría de las secciones se resuelven con Flexbox anidado: cada nivel cambia su flex-direction para acomodar a sus hijos. La clave es no intentar resolver todo en un solo contenedor, sino dividir en capas claras.

Algunas señales de que necesitas Grid en lugar de seguir anidando Flex:

• Tienes que alinear elementos por filas y columnas exactas al mismo tiempo.
• El diseño tiene una cuadrícula visible con tamaños predecibles.
• Estás creando demasiados divs solo para lograr una alineación.

¿Y tú, qué usarías para maquetar este layout: Flexbox anidado o te irías por Grid? Cuéntamelo en los comentarios y nos vemos en la siguiente clase, donde revisaremos plugins que puedes integrar en Tailwind CSS.