Раньше адаптивность вёрстки строилась только на медиазапросах (@media) и брейкпоинтах (sm:, md:, lg:). Но у этого подхода есть ограничение: стили меняются в зависимости от ширины экрана, а не от ширины самого блока. В Tailwind v4 появился новый инструмент — контейнер-квери. С их помощью компонент может сам решать, как выглядеть, исходя из размера своего контейнера.

Что это и зачем нужно?

Контейнер-квери позволяют адаптировать элемент относительно родительского блока, а не всего окна. Это особенно удобно, когда один и тот же компонент может находиться:

• в узкой колонке (например, в боковой панели),
• или в широкой секции на весь экран.

Теперь карточка или блок «умеют» перестраиваться сами, независимо от всего сайта.

Как работает

Объявляем контейнер с помощью класса @container.

Внутри используем префиксы @sm:, @md:, @lg: — но они относятся к контейнеру, а не к экрану.

<div class="@container">
  ...
</div>

По умолчанию учитывается ширина контейнера (inline-size).

Пример 1. Карточка товара

<div class="@container bg-white shadow rounded overflow-hidden">
  <div class="grid grid-cols-1 @md:grid-cols-2">
    <img src="headphones.jpg" class="w-full h-48 object-cover">
    <div class="p-4">
      <h2 class="text-xl font-bold mb-2">Наушники Pro</h2>
      <p class="text-gray-600 mb-4">Беспроводные, с шумоподавлением</p>
      <button class="bg-brand text-white px-4 py-2 rounded">Купить</button>
    </div>
  </div>
</div>

Как это работает:

• По умолчанию (grid-cols-1) картинка сверху, текст снизу.
• Если контейнер достаточно широкий (@md:grid-cols-2) — картинка слева, текст справа.

Карточка адаптируется сама, где бы её ни использовали.

Пример 2. Сетка карточек

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
  <div class="@container bg-gray-50 p-4 rounded">
    <h3 class="text-lg font-bold @md:text-xl">Карточка 1</h3>
    <p class="text-gray-600 @md:text-gray-800">
      Текст адаптируется по контейнеру
    </p>
  </div>
</div>

Сетка меняется глобально (через брейкпоинты экрана). А каждая карточка внутри — локально (через контейнер-квери). Получается двойная адаптивность.

Пример 3. Мини-галерея

<div class="@container p-4 bg-white rounded shadow">
  <div class="grid grid-cols-2 @lg:grid-cols-4 gap-2">
    <img src="img1.jpg" class="w-full h-24 object-cover rounded">
    <img src="img2.jpg" class="w-full h-24 object-cover rounded">
    <img src="img3.jpg" class="w-full h-24 object-cover rounded">
    <img src="img4.jpg" class="w-full h-24 object-cover rounded">
  </div>
</div>

Если контейнер узкий — галерея в 2 колонки. Если шире — перестраивается в 4. Никакой привязки к экрану — только к доступному пространству.

Когда использовать

• Если компонент может находиться в разных условиях (панель, контентная зона, широкая секция).
• Если хочется, чтобы блок сам адаптировался без дополнительных правил.
• Когда нужно переиспользовать один и тот же элемент в разных макетах.

Упражнения ✍️

1. Сделай карточку товара: картинка сверху, при @md ширине контейнера — картинка слева, текст справа.
2. Собери сетку из 3 карточек: сама сетка реагирует на экран, карточки внутри увеличивают заголовок при @md контейнера.
3. Сделай мини-галерею: по умолчанию 2 колонки, при ширине контейнера ≥ @lg — 4.

Итог

Контейнер-квери — это встроенная возможность Tailwind v4, которая раньше требовала плагинов. Они дают компонентам самостоятельность: блоки перестраиваются не только по экрану, но и по своему контейнеру. В связке с классическими брейкпоинтами можно строить по-настоящему гибкие и живые макеты.

👉 В следующей статье (#9) посмотрим, как одновременно использовать брейкпоинты и контейнер-квери в одном проекте.