Container Queries

Définition

Variantes basées sur la taille du conteneur parent, pas du viewport. Natives depuis Tailwind v4.0 (22 janvier 2025), sans le plugin @tailwindcss/container-queries : @container sur le parent, puis @sm:, @md:, @max-md:, conteneurs nommés (@container/main) et tailles arbitraires (@min-[475px]).

Analogie

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

Exemple de code

<div class="@container/main">
  <div class="flex flex-col @md/main:flex-row @max-sm:hidden">
    <!-- s'adapte à la largeur du parent -->
  </div>
</div>

Cas d'usage

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

Termes liés

Sources

• tailwindcss.com/blog/tailwindcss-v4
• tailwindcss.com/docs/responsive-design