Container Queries

Definition

Queries basees sur la taille du conteneur parent (pas du viewport). Supportees en Tailwind via le plugin @tailwindcss/container-queries avec les prefixes @sm, @md, @lg.

Analogie

Un meuble qui s'adapte a la taille de la piece ou il se trouve, pas a la taille de la maison.

Exemple de code

<div class="@container">
  <div class="@sm:flex @lg:grid @lg:grid-cols-2">
    <!-- S'adapte a la taille du parent -->
  </div>
</div>

Cas d'usage

Creer des composants vraiment responsifs qui s'adaptent a leur conteneur, pas au viewport.

Termes lies