Diseño Responsive

Usar variantes de utilidad responsive para construir interfaces de usuario adaptables.

Resumen

Cada clase de utilidad en Tailwind se puede aplicar condicionalmente en diferentes breakpoints, lo que hace que sea pan comido construir interfaces responsive complejas sin salir de tu HTML.

Primero, asegúrate de haber agregado la etiqueta meta viewport al <head> de tu documento:

index.html

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Luego, para agregar una utilidad pero que solo tenga efecto en un cierto breakpoint, todo lo que necesitas hacer es prefijar la utilidad con el nombre del breakpoint, seguido del carácter ::

HTML

<!-- 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 breakpoints por defecto, inspirados en resoluciones de dispositivos comunes:

Prefijo del 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 breakpoint dado, incluso cosas como el espaciado entre letras o los estilos del cursor.

Aquí tienes 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 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 comida increíble 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:

Por defecto, el div exterior es display: block, pero al agregar la utilidad md:flex, se convierte en display: flex en pantallas medianas y más grandes.
Cuando el padre es un contenedor flex, queremos asegurarnos de que la imagen nunca se encoja, así que hemos agregado md:shrink-0 para evitar que se encoja en pantallas medianas y más grandes. Técnicamente podríamos haber usado solo shrink-0 ya que no haría nada en pantallas más pequeñas, pero como solo importa en pantallas md, es una buena idea dejarlo claro en el nombre de la clase.
En pantallas pequeñas, la imagen tiene automáticamente el ancho completo por defecto. En pantallas medianas y superiores, hemos restringido el ancho a un tamaño fijo y nos hemos asegurado de que la imagen tenga la altura completa usando md:h-full md:w-48.

Solo hemos usado un breakpoint en este ejemplo, pero podrías personalizar fácilmente este componente en otros tamaños usando también los prefijos responsive sm, lg, xl o 2xl.

Trabajando mobile-first

Tailwind usa un sistema de breakpoints mobile-first, similar a lo que podrías estar acostumbrado en otros frameworks como Bootstrap.

Lo que esto significa es que las utilidades sin prefijo (como uppercase) tienen efecto en todos los tamaños de pantalla, mientras que las utilidades con prefijo (como md:uppercase) solo tienen efecto en el breakpoint especificado y superiores.

Apuntar a pantallas móviles

Donde este enfoque sorprende más a la gente es que para diseñar algo para móviles, necesitas usar la versión sin prefijo de una utilidad, no la versión con prefijo sm:. No pienses en sm: como "en pantallas pequeñas", piensa en ello como "en el breakpoint pequeño".

No uses sm: para apuntar a dispositivos móviles

HTML

<!-- Esto solo centrará el texto en pantallas de 640px y más anchas, no en pantallas pequeñas -->
<div class="sm:text-center"></div>

Usa utilidades sin prefijo para apuntar a móviles y anúlalos en breakpoints más grandes

HTML

<!-- Esto centrará el texto en móviles y lo alineará a la izquierda en pantallas de 640px y más anchas -->
<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 superponer los cambios que tengan sentido para las pantallas sm, seguido de las pantallas md, etc.

Apuntar a un rango de breakpoints

Por defecto, los estilos aplicados por reglas como md:flex se aplicarán en ese breakpoint y permanecerán aplicados en breakpoints más grandes.

Si deseas aplicar una utilidad solo cuando un rango específico de breakpoints está activo, apila una variante responsive como md con una variante max-* para limitar ese estilo a un rango específico:

HTML

<div class="md:max-xl:flex">
  <!-- ... -->
</div>

Tailwind genera una variante max-* correspondiente para cada breakpoint, por lo que de forma predeterminada están disponibles las siguientes variantes:

Variante	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) { ... }`

Apuntar a un solo breakpoint

Para apuntar a un solo breakpoint, apunta al rango de ese breakpoint apilando una variante responsive como md con la variante max-* del siguiente breakpoint:

HTML

<div class="md:max-lg:flex">
  <!-- ... -->
</div>

Lee sobre apuntar a rangos de breakpoints para aprender más.

Usar breakpoints personalizados

Personalizar tu tema

Usa las variables de tema --breakpoint-* para personalizar tus breakpoints:

app.css

@import "tailwindcss";
@theme {
  --breakpoint-xs: 30rem;
  --breakpoint-2xl: 100rem;
  --breakpoint-3xl: 120rem;
}

Esto actualiza el breakpoint 2xl para usar 100rem en lugar del predeterminado 96rem, y crea nuevos breakpoints xs y 3xl que se pueden usar en tu marcado:

HTML

<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 breakpoints o las utilidades generadas pueden ordenarse de forma inesperada, haciendo que las clases de breakpoint se anulen entre sí de formas inesperadas.

Tailwind usa rem para los breakpoints predeterminados, así que si estás agregando breakpoints adicionales a los predeterminados, asegúrate de usar rem también.

Obtén más información sobre cómo personalizar tu tema en la documentación del tema.

Eliminar breakpoints predeterminados

Para eliminar un breakpoint predeterminado, restablece su valor a la palabra clave initial:

app.css

@import "tailwindcss";
@theme {
  --breakpoint-2xl: initial;
}

También puedes restablecer todos los breakpoints predeterminados usando --breakpoint-*: initial, luego define todos tus breakpoints desde cero:

app.css

@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 de tema predeterminados en la documentación del tema.

Usar valores arbitrarios

Si necesitas usar un breakpoint único que no tiene sentido incluir en tu tema, usa las variantes min o max para generar un breakpoint 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.

Container queries

¿Qué son las container queries?

Las Container queries son una característica moderna de CSS que te permite diseñar algo basado en el tamaño de un elemento padre en lugar del tamaño de todo el viewport. Te permiten construir componentes que son mucho más portátiles y reutilizables porque pueden cambiar según el espacio real disponible para ese componente.

Ejemplo básico

Usa la clase @container para marcar un elemento como contenedor, luego usa variantes como @sm y @md para diseñar elementos hijos según el tamaño del contenedor:

HTML

<div class="@container">
  <div class="flex flex-col @md:flex-row">
    <!-- ... -->
  </div>
</div>

Al igual que las variantes de breakpoint, las container queries son mobile-first en Tailwind CSS y se aplican al tamaño del contenedor objetivo y superiores.

Container queries de ancho máximo

Usa variantes como @max-sm y @max-md para aplicar un estilo por debajo de un tamaño de contenedor específico:

HTML

<div class="@container">
  <div class="flex flex-row @max-md:flex-col">
    <!-- ... -->
  </div>
</div>

Rangos de container query

Apila una variante de container query regular con una variante de container query de ancho máximo para apuntar a un rango específico:

HTML

<div class="@container">
  <div class="flex flex-row @sm:@max-md:flex-col">
    <!-- ... -->
  </div>
</div>

Contenedores nombrados

Para diseños complejos que usan múltiples contenedores anidados, puedes nombrar contenedores usando @container/{name} y apuntar a contenedores específicos con variantes como @sm/{name} y @md/{name}:

HTML

<div class="@container/main">
  <!-- ... -->
  <div class="flex flex-row @sm/main:flex-col">
    <!-- ... -->
  </div>
</div>

Esto hace posible diseñar algo basado en el tamaño de un contenedor distante, en lugar de solo el contenedor más cercano.

Usar tamaños de contenedor personalizados

Usa las variables de tema --container-* para personalizar los tamaños de tu contenedor:

app.css

@import "tailwindcss";
@theme {
  --container-8xl: 96rem;
}

Esto agrega una nueva variante de container query 8xl que se puede usar en tu marcado:

HTML

<div class="@container">
  <div class="flex flex-col @8xl:flex-row">
    <!-- ... -->
  </div>
</div>

Obtén más información sobre cómo personalizar tu tema en la documentación del tema.

Usar valores arbitrarios

Usa variantes como @min-[475px] y @max-[960px] para tamaños de container query únicos que no deseas agregar a tu tema:

HTML

<div class="@container">
  <div class="flex flex-col @min-[475px]:flex-row">
    <!-- ... -->
  </div>
</div>

Usar unidades de container query

Usa unidades de longitud de container query como cqw como valores arbitrarios en otras clases de utilidad para hacer referencia al tamaño del contenedor:

HTML

<div class="@container">
  <div class="w-[50cqw]">
    <!-- ... -->
  </div>
</div>

Referencia de tamaño de 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) { … }`

En esta página