Cuando diseñas con Tailwind CSS, dominar los breakpoints y las medidas de width y height es lo que separa una interfaz que se rompe en móvil de una que fluye en cualquier pantalla. Aquí aprendes cómo funcionan los puntos de quiebre responsivos y cómo aplicar tamaños fijos, relativos y automáticos sin perder el control del layout.

¿Qué es un breakpoint en Tailwind y por qué importa?

Un breakpoint es el punto exacto donde tu pantalla cambia de layout. Cuando arrastras la ventana del navegador y la haces más pequeña, mediana o gigante, ese salto visual ocurre gracias a los breakpoints.

Tailwind sigue una filosofía mobile first, así que tu punto de partida siempre es la pantalla pequeña. Desde ahí escalas hacia arriba según el dispositivo.

¿Qué significa mobile first en Tailwind? Significa que diseñas primero para móvil con el breakpoint small y luego añades clases con prefijos como md: o lg: para adaptar a pantallas más grandes.

¿Cuáles son los breakpoints más comunes?

Estos son los tres saltos que vas a usar el 90% del tiempo [01:05]:

• small (sm): desde 320 píxeles, equivalente a un dispositivo móvil.
• medium (md): desde 768 píxeles, pensado para tablets.
• large (lg): desde 1280 píxeles, ideal para pantallas de computadora.

Con estos tres puntos cubres prácticamente cualquier escenario de diseño responsivo.

¿Cómo maneja Tailwind las medidas de width y height?

Dentro de la documentación, en la sección Sizing [01:50], Tailwind organiza dos tipos de medidas: las fijas en REM y las relativas en porcentajes. Y aquí viene lo interesante: cada una resuelve un problema distinto.

Las medidas fijas se escriben con w- o h- seguido de un número. Por ejemplo, w-4 equivale a 1rem en CSS puro. Es una medida estática que no cambia según el contenedor.

Las medidas porcentuales se manejan como fracciones. Si escribes w-1/2, le estás diciendo al elemento que ocupe la mitad del ancho de su contenedor padre. Esto es clave: el porcentaje siempre depende del padre.

¿Cuándo usar width auto y width full?

El w-auto es tu mejor aliado cuando todavía no tienes claras las medidas finales de una sección. El elemento crece o se ajusta según su contenido.

Por otro lado, w-full toma el 100% del ancho disponible del contenedor padre. Si tienes un div con dos hijos y a cada uno le das w-1/2, ambos terminarán midiendo exactamente lo mismo porque dividen el espacio porcentualmente.

¿Cuál es la diferencia entre w-32 y w-1/3? w-32 es una medida fija en REMs que no cambia. w-1/3 es relativa: ocupa un tercio del ancho del contenedor padre, así que varía según dónde esté.

¿Para qué sirven min-width, max-width y sus equivalentes en height?

Estas propiedades son tu seguro contra estilos rotos. Con min-w- defines un ancho mínimo por debajo del cual el elemento no se encogerá. Con max-w- estableces un techo de crecimiento.

Lo mismo aplica para min-h- y max-h-. La idea es mantener tu diseño responsivo sin que un contenedor explote en pantallas extremas.

¿Cómo se ve esto en un ejemplo práctico con flex?

En la demo [05:30] se construye un div contenedor con varios divs hijos para visualizar el comportamiento. La estructura básica usa la clase flex para alinearlos en fila, ya que por defecto Flex se comporta como columna.

Los pasos clave del ejercicio son:

1. Crear un div padre con w-auto y h-96 y un background visible.
2. Añadir divs hijos con medidas fijas como w-32, w-24, w-64 y w-72 para ver cómo cada uno respeta su tamaño estático.
3. Aplicar flex al padre para que los hijos se alineen horizontalmente.
4. Cambiar las medidas a fracciones como w-1/4 o w-1/3 para observar el comportamiento relativo.

Cuando todos los hijos reciben w-1/4, ocupan exactamente el mismo ancho porque dividen el contenedor padre en partes iguales. Si a cada uno le das una fracción distinta como h-1/2, h-1/4, h-1/3 y h-3/4, las alturas se vuelven heterogéneas y muestran cómo Tailwind respeta el contenedor padre, en este caso definido con h-screen.

¿Qué pasa con el height auto?

Cuando aplicas h-auto al contenedor padre [08:15], su altura crece para adaptarse al hijo más grande. Si el div más alto mide h-72, el padre toma esa misma altura automáticamente. Es la forma más limpia de evitar cortes visuales cuando el contenido es variable.

Dominar estas medidas te prepara para el siguiente paso: combinar Flexbox y Grid dentro de Tailwind. ¿Has notado cómo cambia tu flujo de trabajo cuando piensas en fracciones en lugar de píxeles? Cuéntame en los comentarios qué breakpoint usas más en tus proyectos.