@container Queries в Tailwind CSS: новый уровень адаптивности

Адаптивная верстка уже давно стала стандартом, и большинство разработчиков привыкли к media queries, где условия задаются на основе размеров окна браузера. Однако в реальных проектах часто возникает задача адаптировать элементы не к размеру экрана, а к размеру контейнера, внутри которого они находятся. Именно для этого и нужны container queries — новая технология, которая теперь доступна и в Tailwind CSS.

Что такое container queries?

Container queries позволяют применять стили к элементам в зависимости от размеров их родительского контейнера, а не всего окна. Это особенно полезно при создании гибких компонентов, которые могут использоваться в разных местах с разными размерами.

Например: карточка товара в сайдбаре и на главной странице может иметь разные размеры контейнеров, и благодаря container queries она сможет сама подстраиваться под них, без лишней логики на стороне JavaScript.

Поддержка в Tailwind CSS

Начиная с Tailwind CSS v3.2, появилась поддержка container queries. Это стало возможным благодаря появлению нативной CSS-директивы @container и модификаторам Tailwind.

Как включить поддержку

1. Включите container queries в конфиге:

// tailwind.config.js
module.exports = {
  theme: {
    container: {
      center: true,
    },
  },
  plugins: [],
}

2. Определите контейнер:
   Чтобы контейнер мог быть «точкой отсчета» для стилей, нужно явно указать, что элемент является контейнером:

<div class="container mx-auto">
  <div class="@container">
    <!-- Контент -->
  </div>
</div>

В Tailwind это делается с помощью утилиты container или @container в CSS.

Использование синтаксиса в Tailwind

Tailwind предлагает удобные префиксы для container queries.
Пример:

<div class="@container p-4 border">
  <p class="text-sm @md:text-lg">
    Этот текст увеличится, если контейнер достигнет ширины md.
  </p>
</div>

Объяснение:

• @container — включает область контейнера.
• @md: — применяет стиль, если контейнер шире, чем md (по умолчанию 768px).

Пример с карточками

<div class="grid grid-cols-1 gap-4 md:grid-cols-3">
  <div class="@container bg-white p-4 rounded shadow">
    <h2 class="text-base @lg:text-xl font-bold">Заголовок</h2>
    <p class="text-sm @lg:text-base">
      Описание карточки, которое изменяет размер шрифта в зависимости от ширины контейнера.
    </p>
  </div>
</div>

Преимущества

• Более модульная верстка — компоненты не зависят от глобальных размеров окна.
• Проще поддерживать дизайн — один и тот же компонент адаптируется в разных местах без дублирования стилей.
• Меньше костылей на JavaScript — всё на чистом CSS и утилитах Tailwind.

Ограничения и нюансы

• Работает только в современных браузерах (Chrome 105+, Firefox 109+, Safari 16+).
• Нужно явно указывать контейнер (@container), иначе стили не применятся.
• Tailwind пока использует синтаксис с @ в префиксах, что может быть непривычно.

Заключение

Container queries в Tailwind CSS — это шаг вперёд к действительно гибким и переиспользуемым компонентам. Если вы уже используете Tailwind и хотите, чтобы ваши компоненты адаптировались не только к экрану, но и к своему контейнеру, стоит попробовать этот инструмент прямо сейчас.