Diseño responsive
Tamaño de pantalla
Tailwind establece una serie de "breakpoints" o tamaños de pantalla predefinidos que por defecto son:
- sm: 40rem (640px)
- md: 48rem (768px)
- lg: 64rem (1024px)
- xl: 80rem (1280px)
- 2xl: 96rem (1536px)
Tailwind utiliza una filosofía mobile-first por lo que estos breakpoints siempre se referirán a tamaños de pantalla "a partir de". Es decir, debemos establecer un diseño básico que se aplicará desde el tamaño 0 de pantalla y podremos sobrescribir estilos a partir de los tamaños de pantalla predefinidos anteriormente.
Para cambiar un estilo a partir de un breakpoint predefinido, basta con poner el nombre de dicho breakpoint seguido de ':' y la regla a aplicar a partir de dicho tamaño (Ejemplo → lg:grid-cols-3):
<!-- Texto centrado en móviles y a la izquierda a partir de 640px de ancho -->
<div class="text-center sm:text-left"></div>Rango de tamaños
Para establecer una clase que solo tenga efecto entre un mínimo y máximo de pantalla utilizamos después del breakpoint inicial, otro breakpoint final (debe ser como mínimo el siguiente) con el prefijo max-*:
<div class="hidden md:max-xl:flex">
<!-- Entre 48 y 80 rem se verá como un contenedor flex -->
</div>Custom breakpoints
Podemos sobrescribir el tamaño de pantalla para un breakpoint sobrescribiendo la variable correspondiente del tema:
@import "tailwindcss";
@theme {
--breakpoint-xs: 30rem;
--breakpoint-2xl: 100rem;
--breakpoint-3xl: 120rem;
}Para eliminar el efecto de alguno de estos breakpoints, basta con reasignar el valor initial. Con breakpoint-*: initial eliminamos todos.
También podemos crear variables nuevas para establecer nuevos breakpoints con el prefijo --breakpoint-*:
@import "tailwindcss";
@theme {
--breakpoint-*: initial; // Quitamos todos los breakpoints actuales
--breakpoint-tablet: 40rem;
--breakpoint-laptop: 64rem;
--breakpoint-desktop: 80rem;
}
Container queries
Muchas veces es más interesante hacer variaciones de estilo en función del tamaño de un elemento contenedor en lugar de usar el tamaño del documento. Por ejemplo, en un diseño responsive, si tenemos un menú lateral que desaparece a partir de bajar de un determinado tamaño de pantalla, los elementos que aún se visualizan en pantalla pasarán a tener mayor espacio de visualización en ese momento a pesar de que el espacio global sea menor.
Para utilizar container queries declaramos un elemento como contenedor con la directiva @container y dentro utilizamos los mismos breakpoints que en los apartados anteriores pero precedidos también de una arroba '@' (@sm, @md, @lg, ...).
<main class="flex p-4 gap-4">
<section class="grow @container">
<div class=" grid grid-cols-2 @lg:grid-cols-3 gap-2">
<div class="p-4 h-16 bg-blue-600 text-white">01</div>
<div class="p-4 h-16 bg-red-600 text-white">02</div>
<div class="p-4 h-16 bg-green-600 text-white">03</div>
<div class="p-4 h-16 bg-amber-600 text-white">04</div>
</div>
</section>
<aside class="p-4 w-40 h-32 hidden sm:block bg-amber-400 text-white">
Aside
</aside>
</main>
Concretamente para el ejemplo anterior podríamos haber conseguido un efecto similar simplemente utilizando auto-fit en el contenedor grid.
<main class="flex p-4 gap-4 @container">
<section class="grow grid grid-cols-[repeat(auto-fit,minmax(160px,1fr))] gap-2">
<div class="p-4 h-16 bg-blue-600 text-white">01</div>
<div class="p-4 h-16 bg-red-600 text-white">02</div>
<div class="p-4 h-16 bg-green-600 text-white">03</div>
<div class="p-4 h-16 bg-amber-600 text-white">04</div>
</section>
<aside class="p-4 w-40 h-32 hidden sm:block bg-amber-400 text-white">Aside</aside>
</main>