Контейнерные запросы

Префиксы sm: и md: смотрят на ширину окна. Но одна и та же карточка может стоять и в широкой основной колонке, и в узкой боковой панели. Контейнерные запросы меняют стили в зависимости от ширины родителя, а не экрана. В Tailwind 4 они встроены и не требуют плагина.

Контейнер и вариант

Родителю ставят класс @container, а детям — варианты с собачкой: @sm:, @md:, @lg: и так далее:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<div class="@container w-64 border border-gray-200 p-2">
  <p class="bg-rose-200 p-3 @md:bg-emerald-200">Узкий контейнер</p>
</div>
<div class="@container mt-3 border border-gray-200 p-2">
  <p class="bg-rose-200 p-3 @md:bg-emerald-200">Широкий контейнер</p>
</div>

Классы одинаковые, но первый абзац розовый, а второй зелёный: ширина первого контейнера всего 16rem, а @md: включается от 28rem.

Размеры контейнеров

Есть и меньшие ступени @3xs:, @2xs: и большие до @7xl:. Обратите внимание: значения отличаются от контрольных точек экрана.

Карточка, которая подстраивается сама

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

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<div class="grid grid-cols-3 gap-4">
  <div class="@container col-span-2">
    <div class="overflow-hidden rounded-xl bg-white shadow @xs:flex">
      <img src="/media/photo-400x250.jpg" alt="Наушники" class="h-32 w-full object-cover @xs:h-auto @xs:w-32">
      <p class="p-4 font-semibold">Наушники — $79</p>
    </div>
  </div>
  <div class="@container">
    <div class="overflow-hidden rounded-xl bg-white shadow @xs:flex">
      <img src="/media/photo-400x250.jpg" alt="Колонка" class="h-32 w-full object-cover @xs:h-auto @xs:w-32">
      <p class="p-4 font-semibold">Колонка — $45</p>
    </div>
  </div>
</div>

В широкой ячейке картинка встала слева от текста, а в узкой осталась сверху. Одна разметка карточки работает в любом месте страницы.

Именованные контейнеры

Если контейнеры вложены друг в друга, вариант ориентируется на ближайший. Чтобы указать конкретный, контейнеру дают имя через косую черту: @container/sidebar, а детям пишут @lg/sidebar:flex.

Частая ошибка

Забыть класс @container у родителя:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<div class="border border-gray-200 p-2">
  <p class="bg-rose-200 p-3 @sm:bg-emerald-200">Почему всегда розовый?</p>
</div>

Абзац не меняется на любой ширине: без @container у предка браузеру не с чем сравнивать размер. Контейнером должен быть именно родитель или другой предок, а не сам элемент с вариантом.