--- title: "Container Queries en Tailwind: Qué son, cuándo usarlas y cómo aplicarlas en WordPress" url: "https://flowtitude.com/container-queries-tailwind-wordpress/" type: "post" published: "2025-08-06T09:47:02+02:00" modified: "2026-11-02T07:49:58+01:00" author: "Angel Julian" --- ## 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** (`@min-[500px]:grid-cols-2`). ✅ 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`: | Alias | Condición (min-width) | rem | px aprox. | | --- | --- | --- | --- | | @3xs | @container (min-width: 16rem) | 16 | 256 | | @2xs | @container (min-width: 18rem) | 18 | 288 | | @xs | @container (min-width: 20rem) | 20 | 320 | | @sm | @container (min-width: 24rem) | 24 | 384 | | @md | @container (min-width: 28rem) | 28 | 448 | | @lg | @container (min-width: 32rem) | 32 | 512 | | @xl | @container (min-width: 36rem) | 36 | 576 | | @2xl | @container (min-width: 42rem) | 42 | 672 | | @3xl | @container (min-width: 48rem) | 48 | 768 | | @4xl | @container (min-width: 56rem) | 56 | 896 | | @5xl | @container (min-width: 64rem) | 64 | 1024 | | @6xl | @container (min-width: 72rem) | 72 | 1152 | | @7xl | @container (min-width: 80rem) | 80 | 1280 | **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; /* Ojo: borra también max-w-md, max-w-xl… que usan estos mismos valores */ --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 | Aspecto | Media Queries (responsive clásico) | Container Queries (por componente) | | --- | --- | --- | | ¿Qué mide? | Ancho/alto del viewport (pantalla completa). | Ancho/alto del contenedor donde vive el componente. | | Ámbito | Global (afecta a toda la página/tema). | Local (afecta solo al componente observado). | | Granularidad | Baja–media. Buenas para estructura general. | Alta. Cada bloque decide según su propio espacio. | | Ejemplos de uso | Header, footer, grid principal, tipografía global. | Cards, listados, banners embebidos, widgets, formularios en sidebars. | | Ventajas | Sencillas de entender; controlan el layout general con pocas reglas. | Componentes reutilizables y portables; evitan overrides por contexto. | | Inconvenientes | Un mismo componente se comporta igual en cualquier lugar, aunque su espacio cambie. | Exigen marcar el contenedor (`@container`) y pensar por componentes. | | Mantenibilidad | Fácil al inicio; puede crecer en reglas globales difíciles de modular. | Muy buena en sistemas de diseño; lógica cercana al componente. | | Integración WP | Funciona igual en Bricks y Gutenberg (breakpoints del tema). | Funciona igual en Bricks y Gutenberg; requiere `@container` en el wrapper del bloque. | | En Tailwind v4 | Variantes `sm: md: lg: xl: 2xl:` (viewport). | Variantes `@sm: @md: @lg: @xl: @2xl:` (contenedor) y valores arbitrarios `@[50rem]:…`. | | Cuándo elegir | Usa media queries para cambios que afectan a toda la página (estructura y tipografía global). | Usa container queries para que un componente se adapte según su hueco real (módulos reutilizables). | | Combinación recomendada | Diseña el armazón con media queries y da inteligencia local con container queries. Funcionan juntas. | | ## Ejemplo visual rápido 📦 Piensa en una caja (el contenedor). 📄 Dentro hay un bloque de contenido. Si la caja mide **32rem (512px) o más**, mostramos el contenido en dos columnas. Si mide menos, lo mostramos en una sola. ```

Texto de ejemplo

``` 🔍 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 ```
Producto

Producto

Descripción breve del producto.

``` ### 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: ```

Texto

Más contenido

``` ## 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**. --- Si quieres ver ejemplos prácticos de **Container Queries en acción**, participa en la comunidad **Flowtitude**. Compartimos plantillas, clases y casos reales que puedes usar en tus proyectos de WordPress con Tailwind. [Únete aquí →](https://flowtitude.com)