Instalación

Este plugin tiene una instalación muy sencilla y no requiere de una configuración a priory, a no ser que necesites crear o modificar los tamaños para los contenedores.

En prinicipio no vamos a mostrar como instalarlo ya que es un plugin que usamos en todas las configruaciones de Tailwind y puedes ver la instalación en la sección de configuración de flowtitude.

¿Qué son los Query Containers?

Los Query Containers permiten aplicar estilos CSS en función del tamaño de un contenedor específico, en lugar del tamaño de la ventana gráfica (viewport). Esto facilita la creación de componentes que se adapten dinámicamente al espacio disponible en su contenedor padre.

Ventajas de usar Query Containers

• Adaptabilidad: Permiten que los componentes sean más modulares y adaptables, sin depender del tamaño del viewport del dispositivo.
• Reutilización de componentes: Facilitan la creación de componentes que pueden ser reutilizados en diferentes contextos y tamaños sin necesidad de redefinir estilos globales.
• Mantenimiento y escalabilidad: Mejoran la mantenibilidad y escalabilidad del CSS, ya que los estilos están más localizados y específicos a los componentes.

Cómo se usan

Primero que nada hay que marcar el elemento que actua como contendor  usando la clase @container y luego aplicando estilos basados en el tamaño de ese contenedor usando variantes de contenedor como @md:, @lg: y @xl: su funcionamiento es similar al de los puntos de ruptura, se diferencia en que habria muchoas mas puntos y estos empiezan por la arroba.

Así pues un ejemplo básico imaginemos que para hacer un diseño responsivo en vez de utilizar los puntos de ruptura tradicionales sería:

<section class="@container">
  <div>
    <article class="grid @4xl:grid-cols-2">
      <div>
        <img class="w-full h-full object-cover" src="https://picsum.photos/600/400" alt="">
      </div>
      <div class="flex flex-col items-start justify-center py-6 @4xl:p-xl">
        <span class="font-simibold leading-none text-6xl text-neutral-200 @5xl:text-9xl">
          01
        </span>
...

Este es un fragmento de codigo de una de las secciones de flowtitude, donde se puede apreciar que usamos de forma predeterminada los contenedores para crear las distintas variaciones. Ya que se trata de una sección, el comportamiento es igual a como se haria con los puntos de ruptura a la vieja usanza.

Mostramos a continuación de una tabla donde puedes ver los distintos tamaños de contenedor que se manejan de forma predeterminada, observa que estamos trabajando con tamaños mínimos de los contenedores lo que nos permiyte el enfoque de mobile-first tal como lo hace Tailwind CSS:

Su uso como sustitución de los puntos de ruptura, diferencias y ventajas

Diferencias con los Puntos de Ruptura (Breakpoints)

• Contexto de Aplicación: Los puntos de ruptura tradicionales (media queries) se aplican en función del tamaño del viewport. Los Query Containers, en cambio, se aplican según el tamaño de un contenedor específico.
• Granularidad: Los Query Containers permiten una mayor granularidad y precisión en el diseño, ya que pueden adaptarse a cambios de tamaño de contenedores individuales, no solo de la ventana completa.
• Encapsulación: Facilitan la encapsulación de estilos dentro de componentes específicos, reduciendo la necesidad de estilos globales.

Ventajas de los Query Containers

• Componentes Autónomos: Cada componente puede tener su propio conjunto de reglas de adaptabilidad, lo que reduce las dependencias y conflictos de estilos.
• Flexibilidad: Permiten diseñar componentes que funcionen bien en cualquier tamaño de contenedor, mejorando la flexibilidad del diseño.