Conceptos clave
Uso de variantes de utilidad responsivas para crear interfaces de usuario adaptativas.
Cada clase de utilidad en Tailwind se puede aplicar condicionalmente en diferentes puntos de interrupción (breakpoints), lo que hace que sea muy sencillo crear interfaces responsivas complejas sin salir de tu HTML.
Primero, asegúrate de haber agregado la etiqueta meta viewport al <head> de tu documento:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />Luego, para agregar una utilidad pero hacer que solo tenga efecto en un punto de interrupción determinado, todo lo que necesitas hacer es anteponer a la utilidad el nombre del punto de interrupción, seguido del carácter ::
<!-- Ancho de 16 por defecto, 32 en pantallas medianas y 48 en pantallas grandes --><img class="w-16 md:w-32 lg:w-48" src="..." />Hay cinco puntos de interrupción por defecto, inspirados en resoluciones de dispositivos comunes:
| Prefijo de breakpoint | Ancho mínimo | CSS |
|---|---|---|
sm | 40rem (640px) | @media (width >= 40rem) { ... } |
md | 48rem (768px) | @media (width >= 48rem) { ... } |
lg | 64rem (1024px) | @media (width >= 64rem) { ... } |
xl | 80rem (1280px) | @media (width >= 80rem) { ... } |
2xl | 96rem (1536px) | @media (width >= 96rem) { ... } |
Esto funciona para cada clase de utilidad en el framework, lo que significa que puedes cambiar literalmente cualquier cosa en un punto de interrupción dado, incluso cosas como el espaciado de letras o los estilos de cursor.
Aquí hay un ejemplo simple de un componente de página de marketing que usa un diseño apilado en pantallas pequeñas y un diseño de lado a lado en pantallas más grandes:
<div class="mx-auto max-w-md overflow-hidden rounded-xl bg-white shadow-md md:max-w-2xl"> <div class="md:flex"> <div class="md:shrink-0"> <img class="h-48 w-full object-cover md:h-full md:w-48" src="/img/building.jpg" alt="Arquitectura de edificio moderno" /> </div> <div class="p-8"> <div class="text-sm font-semibold tracking-wide text-indigo-500 uppercase">Retiros de empresa</div> <a href="#" class="mt-1 block text-lg leading-tight font-medium text-black hover:underline"> Alojamiento increíble para tu equipo </a> <p class="mt-2 text-gray-500"> ¿Buscas llevar a tu equipo a un retiro para disfrutar de una comida excelente y tomar un poco de sol? Tenemos una lista de lugares para hacer precisamente eso. </p> </div> </div></div>Así es como funciona el ejemplo anterior:
div exterior es display: block, pero al agregar la utilidad md:flex, se convierte en display: flex en pantallas medianas y más grandes.md:shrink-0 para evitar que se encoja en pantallas medianas y más grandes. Técnicamente podríamos haber usado simplemente shrink-0 ya que no haría nada en pantallas más pequeñas, pero dado que solo importa en pantallas md, es una buena idea dejarlo claro en el nombre de la clase.md:h-full md:w-48.Solo hemos usado un punto de interrupción en este ejemplo, pero también podrías personalizar fácilmente este componente en otros tamaños usando los prefijos responsivos sm, lg, xl o 2xl.
Tailwind utiliza un sistema de puntos de interrupción mobile-first, similar al que podrías estar acostumbrado en otros frameworks como Bootstrap.
Lo que esto significa es que las utilidades sin prefijo (como uppercase) surten efecto en todos los tamaños de pantalla, mientras que las utilidades con prefijo (como md:uppercase) solo surten efecto en el punto de interrupción especificado y superior.
Donde este enfoque sorprende a la gente con más frecuencia es que para dar estilo a algo para móvil, debes usar la versión sin prefijo de una utilidad, no la versión con prefijo sm:. No pienses que sm: significa "en pantallas pequeñas", piénsalo como "en el punto de interrupción pequeño".
No uses sm: para apuntar a dispositivos móviles
<!-- Esto solo centrará el texto en pantallas de 640px o más, no en pantallas pequeñas --><div class="sm:text-center"></div>Usa utilidades sin prefijo para apuntar a móviles y sobrescríbelas en puntos de interrupción más grandes
<!-- Esto centrará el texto en móviles y lo alineará a la izquierda en pantallas de 640px o más --><div class="text-center sm:text-left"></div>Por esta razón, a menudo es una buena idea implementar primero el diseño móvil para un diseño, luego añadir capas de cambios que tengan sentido para pantallas sm, seguidas de pantallas md, etc.
Por defecto, los estilos aplicados por reglas como md:flex se aplicarán en ese punto de interrupción y permanecerán aplicados en puntos de interrupción más grandes.
Si deseas aplicar una utilidad solo cuando un rango de puntos de interrupción específico está activo, apila una variante responsiva como md con una variante max-* para limitar ese estilo a un rango específico:
<div class="md:max-xl:flex"> <!-- ... --></div>Tailwind genera una variante max-* correspondiente para cada punto de interrupción, por lo que de forma predeterminada están disponibles las siguientes variantes:
| Variante | Consulta de medios (media query) |
|---|---|
max-sm | @media (width < 40rem) { ... } |
max-md | @media (width < 48rem) { ... } |
max-lg | @media (width < 64rem) { ... } |
max-xl | @media (width < 80rem) { ... } |
max-2xl | @media (width < 96rem) { ... } |
Para apuntar a un solo punto de interrupción, apunta al rango de ese punto de interrupción apilando una variante responsiva como md con la variante max-* para el siguiente punto de interrupción:
<div class="md:max-lg:flex"> <!-- ... --></div>Lee sobre apuntar a rangos de puntos de interrupción para obtener más información.
Utiliza las variables de tema --breakpoint-* para personalizar tus puntos de interrupción:
@import "tailwindcss";@theme { --breakpoint-xs: 30rem; --breakpoint-2xl: 100rem; --breakpoint-3xl: 120rem;}Esto actualiza el punto de interrupción 2xl para usar 100rem en lugar del predeterminado 96rem, y crea nuevos puntos de interrupción xs y 3xl que se pueden usar en tu marcado:
<div class="grid xs:grid-cols-2 3xl:grid-cols-6"> <!-- ... --></div>Ten en cuenta que es importante usar siempre la misma unidad para definir tus puntos de interrupción, o las utilidades generadas podrían ordenarse de una manera inesperada, causando que las clases de punto de interrupción se sobrescriban entre sí de formas no deseadas.
Tailwind usa rem para los puntos de interrupción predeterminados, por lo que si estás agregando puntos de interrupción adicionales a los predeterminados, asegúrate de usar rem también.
Obtén más información sobre la personalización de tu tema en la documentación de temas.
Para eliminar un punto de interrupción predeterminado, restablece su valor a la palabra clave initial:
@import "tailwindcss";@theme { --breakpoint-2xl: initial;}También puedes restablecer todos los puntos de interrupción predeterminados usando --breakpoint-*: initial, y luego definir todos tus puntos de interrupción desde cero:
@import "tailwindcss";@theme { --breakpoint-*: initial; --breakpoint-tablet: 40rem; --breakpoint-laptop: 64rem; --breakpoint-desktop: 80rem;}Obtén más información sobre cómo eliminar valores predeterminados del tema en la documentación de temas.
Si necesitas usar un punto de interrupción único que no tiene sentido incluir en tu tema, usa las variantes min o max para generar un punto de interrupción personalizado sobre la marcha usando cualquier valor arbitrario:
<div class="max-[600px]:bg-sky-300 min-[320px]:text-center"> <!-- ... --></div>Obtén más información sobre el soporte de valores arbitrarios en la documentación de valores arbitrarios.
Las consultas de contenedor (container queries) son una característica de CSS moderna que te permite dar estilo a algo basándote en el tamaño de un elemento padre en lugar del tamaño de toda la ventana gráfica. Te permiten crear componentes que son mucho más portables y reutilizables porque pueden cambiar en función del espacio real disponible para ese componente.
Utiliza la clase @container para marcar un elemento como un contenedor de tamaño en línea (inline-size), luego usa variantes como @sm and @md para dar estilo a los elementos hijos en función del tamaño del contenedor:
<div class="@container"> <div class="flex flex-col @md:flex-row"> <!-- ... --> </div></div>Al igual que las variantes de punto de interrupción, las consultas de contenedor son mobile-first en Tailwind CSS y se aplican en el tamaño del contenedor objetivo y superior.
Utiliza variantes como @max-sm y @max-md para aplicar un estilo por debajo de un tamaño de contenedor específico:
<div class="@container"> <div class="flex flex-row @max-md:flex-col"> <!-- ... --> </div></div>Apila una variante de consulta de contenedor normal con una variante de consulta de contenedor de ancho máximo para apuntar a un rango específico:
<div class="@container"> <div class="flex flex-row @sm:@max-md:flex-col"> <!-- ... --> </div></div>Para diseños complejos que utilizan múltiples contenedores anidados, puedes nombrar contenedores usando @container/{name} y apuntar a contenedores específicos con variantes como @sm/{name} y @md/{name}:
<div class="@container/main"> <!-- ... --> <div class="flex flex-row @sm/main:flex-col"> <!-- ... --> </div></div>Esto hace posible dar estilo a algo basándose en el tamaño de un contenedor distante, en lugar de solo en el contenedor más cercano.
Utiliza @container-size para marcar un elemento como un contenedor de tamaño en lugar de un contenedor de tamaño en línea (inline-size) cuando necesites usar unidades de longitud de consulta de contenedor que dependan del tamaño de bloque, como cqb:
<div class="@container-size"> <div class="h-[50cqb]"> <!-- ... --> </div></div>También puedes nombrar contenedores de tamaño usando @container-size/{name}.
Utiliza las variables de tema --container-* para personalizar tus tamaños de contenedor:
@import "tailwindcss";@theme { --container-8xl: 96rem;}Esto agrega una nueva variante de consulta de contenedor 8xl que se puede usar en tu marcado:
<div class="@container"> <div class="flex flex-col @8xl:flex-row"> <!-- ... --> </div></div>Obtén más información sobre la personalización de tu tema en la documentación de temas.
Utiliza variantes como @min-[475px] y @max-[960px] para tamaños únicos de consulta de contenedor que no desees añadir a tu tema:
<div class="@container"> <div class="flex flex-col @min-[475px]:flex-row"> <!-- ... --> </div></div>Utiliza unidades de longitud de consulta de contenedor como cqw y cqi como valores arbitrarios en otras clases de utilidad para hacer referencia al tamaño del contenedor:
<div class="@container"> <div class="w-[50cqw]"> <!-- ... --> </div></div>Para unidades que necesitan más que el tamaño en línea (inline size), como cqb y cqh, utiliza @container-size para hacer disponible el tamaño completo del contenedor.
Por defecto, Tailwind incluye tamaños de contenedor que van desde 16rem (256px) hasta 80rem (1280px):
| Variante | Ancho mínimo | CSS |
|---|---|---|
@3xs | 16rem (256px) | @container (width >= 16rem) { … } |
@2xs | 18rem (288px) | @container (width >= 18rem) { … } |
@xs | 20rem (320px) | @container (width >= 20rem) { … } |
@sm | 24rem (384px) | @container (width >= 24rem) { … } |
@md | 28rem (448px) | @container (width >= 28rem) { … } |
@lg | 32rem (512px) | @container (width >= 32rem) { … } |
@xl | 36rem (576px) | @container (width >= 36rem) { … } |
@2xl | 42rem (672px) | @container (width >= 42rem) { … } |
@3xl | 48rem (768px) | @container (width >= 48rem) { … } |
@4xl | 56rem (896px) | @container (width >= 56rem) { … } |
@5xl | 64rem (1024px) | @container (width >= 64rem) { … } |
@6xl | 72rem (1152px) | @container (width >= 72rem) { … } |
@7xl | 80rem (1280px) | @container (width >= 80rem) { … } |