Container Queries en Tailwind: Qué son, cuándo usarlas y cómo aplicarlas en WordPress

Por qué hablamos de esto?

Cuando pensamos en diseño responsive, lo más común es imaginar media queries.
Estas reglas de CSS ajustan el diseño según el tamaño total de la pantalla (viewport).

Este enfoque funciona bien… hasta que queremos componentes realmente flexibles que se adapten según el espacio que tienen, no según el tamaño del dispositivo.

Piénsalo así:

• Un mismo bloque de “producto” podría verse horizontal si está en una zona amplia.
• O vertical si está en una columna estrecha…
  Independientemente de si el usuario está en un móvil, una tablet o un monitor grande.

Esa es la magia de las Container Queries.

¿Qué es exactamente una Container Query?

Una Container Query es como una media query, pero en lugar de preguntar:

«¿Qué ancho tiene la pantalla?»

pregunta:

«¿Qué ancho tiene este contenedor específico?»

Esto abre la puerta a crear componentes totalmente modulares y reutilizables.

En otras palabras: diseñamos en base al espacio real disponible, no al tamaño general del navegador.

Por qué Tailwind 4 hace que sea más fácil

Antes, usar Container Queries requería:

• Mucho CSS manual.
• Recordar sintaxis poco intuitiva.
• Configuraciones personalizadas.

Con Tailwind 4, ahora se integran de forma nativa mediante:

• La clase @container para marcar un elemento como contenedor observado.
• Prefijos como @sm:, @md:, @lg:… pero aplicados al ancho del contenedor.
• Compatibilidad con valores arbitrarios (@container (min-width: 500px)).

✅ Esto significa que:

• No necesitas inventar sistemas complicados.
• Puedes combinarlo con las utilidades que ya usas.
• Funciona igual en Bricks Builder y Gutenberg (con un plugin de integración como Winden o WindPress).

Todos los tamaños de contenedores en Tailwind 4

Por defecto, Tailwind 4 ofrece estos tamaños para @container:

Notas: Los alias @sm, @md, @lg, @xl, @2xl… funcionan igual que los breakpoints responsive de Tailwind, pero aplicados al ancho del contenedor marcado con @container (no al viewport). Puedes combinarlos con variantes de máximo y con valores arbitrarios cuando necesites umbrales exactos.

• Variante por máximo: aplica estilos cuando el contenedor no supera un tamaño.
  Ejemplo: @max-md:flex-col
• Valor arbitrario (umbral exacto): define el punto de corte que prefieras.
  Ejemplo: @[50rem]:grid-cols-2
• Recuerda marcar el wrapper: sin @container en el elemento padre, las variantes no se activan.

💡 Recomendación práctica: usa media queries (breakpoints de viewport) para la estructura global del sitio y container queries para dar adaptabilidad a cada componente en función del espacio real que ocupa.

📌 Configuración en @theme:

@import "tailwindcss";

@theme {
  --container-*: initial;          /* Elimina valores por defecto si vas a redefinirlos */
  --container-md: 28rem;
  --container-lg: 32rem;
  --container-xl: 36rem;
}

Puedes personalizar estos valores según tu sistema de diseño.

Tabla comparativa: Media Queries vs Container Queries

Ejemplo visual rápido

📦 Piensa en una caja (el contenedor).
📄 Dentro hay un bloque de contenido.

Si la caja mide más de 500px, mostramos el contenido en dos columnas.
Si mide menos, lo mostramos en una sola.

<div class="@container p-4 bg-gray-100">
  <div class="grid grid-cols-1 @lg:grid-cols-2 gap-4">
    <img src="imagen.jpg" alt="" class="rounded">
    <p>Texto de ejemplo</p>
  </div>
</div>

🔍 Explicación:

• @container → marca al elemento como contenedor.
• @lg: → el breakpoint se calcula según el contenedor, no el viewport.

Caso real: Tarjeta de producto adaptable

Queremos una tarjeta de producto que cambie su diseño automáticamente dependiendo del ancho de su propio contenedor, no del viewport.

📌 Objetivo:

• En contenedores estrechos → diseño vertical (imagen arriba, texto abajo).
• En contenedores anchos (≥400px) → diseño horizontal (imagen a la izquierda, texto a la derecha).

HTML con clases Tailwind

<div class="@container bg-white p-4 rounded shadow">
  <div class="flex flex-col gap-4 @[400px]:flex-row">
    <img src="producto.jpg" alt="Producto" 
         class="w-full @[400px]:w-[150px] @[400px]:h-auto rounded">
    <div class="flex flex-col justify-center">
      <h3 class="text-lg font-bold">Producto</h3>
      <p class="text-sm text-gray-600">Descripción breve del producto.</p>
    </div>
  </div>
</div>

Explicación:

• @container → Marca el elemento como contenedor observado.
• @[400px]:flex-row → Cuando el contenedor mide al menos 400px, cambia el layout a horizontal.
• @[400px]:w-[150px] → Fija el ancho de la imagen solo en vista horizontal.
• Sin CSS adicional: todo está en las clases utilitarias, por lo que no necesitamos editar @theme ni crear reglas personalizadas.
• Funciona igual en Bricks y Gutenberg siempre que el plugin soporte arbitrary variants.

Cómo aplicarlo en WordPress

En Bricks Builder

• Añade @container al wrapper principal.
• Usa breakpoints de contenedor (@sm:, @md:…).
• Combínalo con clases utilitarias para espaciado, tipografía y grid.

En Gutenberg

• Usa un bloque Group o Cover como wrapper.
• Añade la clase @container.
• Usa las utilidades de Tailwind para definir cambios.

Ejemplo:

<div class="@container grid grid-cols-1 @md:grid-cols-2 gap-4">
  <p>Texto</p>
  <p>Más contenido</p>
</div>

Errores comunes y cómo evitarlos

❌ Usarlas como media queries globales
✅ Recuerda: cada componente se adapta por sí mismo.

❌ Olvidar marcar el contenedor
✅ Sin @container, las reglas no se aplican.

❌ Reglas demasiado complejas
✅ Limita las CQ a un solo componente por vez.

Por qué encaja con Flowtitude

• Componentes independientes y modulares.
• Menos CSS global, más escalabilidad.
• Total compatibilidad con nuestro flujo en Bricks y Gutenberg.