Адаптивная вёрстка в Tailwind CSS: брейкпоинты и медиазапросы

Tailwind CSS решает адаптивность через префиксы брейкпоинтов. Класс без префикса, например flex-col, действует на любом размере, а класс с префиксом, например md:flex-row, действует от брейкпоинта md (48rem, 768 px) и шире. Поэтому Tailwind по умолчанию работает по принципу mobile first: телефонную раскладку вы пишете без префиксов, а для больших экранов добавляете префиксы. Статья описывает Tailwind v4, с пометками для v3 там, где синтаксис отличается.

Брейкпоинты по умолчанию в Tailwind CSS v4

Префикса xs: по умолчанию нет. Стили без префикса и есть ваша самая маленькая раскладка. Значения можно сверить в документации Tailwind по адаптивному дизайну.

Как работают префиксы mobile first

Типичная сетка карточек:

<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 lg:gap-8">
  ...
</div>

Читайте слева направо: одна колонка на телефонах, две колонки от 640 px, три колонки и увеличенные отступы от 1024 px. Частая ошибка — написать sm:grid-cols-1 и ждать, что это сработает на телефонах. sm: означает «640 px и шире», поэтому стили для телефонов пишутся без префикса.

Шапка, которая из столбца превращается в строку:

<header class="flex flex-col items-start gap-3 md:flex-row md:items-center md:justify-between">

Как задать диапазон или максимальную ширину

В Tailwind v4 есть варианты max-*, и их можно комбинировать с префиксами min-width:

• max-md:hidden скрывает элемент на ширине меньше 768 px.
• md:max-lg:flex действует только от 768 px до 1024 px (не включая).

Для разовых значений используйте произвольные брейкпоинты: min-[900px]:grid-cols-4 или max-[420px]:text-sm. Не злоупотребляйте ими: если значение встречается в нескольких местах, сделайте из него именованный брейкпоинт.

Как добавить или изменить брейкпоинты

В v4 брейкпоинты — это переменные темы, которые задаются в CSS:

@import "tailwindcss";

@theme {
  --breakpoint-xs: 30rem;
  --breakpoint-3xl: 120rem;
}

Так появятся префиксы xs: и 3xl:. Чтобы изменить существующий, переопределите его (--breakpoint-md: 50rem;). Чтобы убрать брейкпоинт по умолчанию, задайте ему initial.

В Tailwind v3 та же настройка находится в tailwind.config.js в theme.screens (или в theme.extend.screens, чтобы сохранить значения по умолчанию).

Используйте rem, чтобы брейкпоинты учитывали пользователей, которые меняют базовый размер шрифта в браузере. Как выбрать сами значения ширины, рассказано в статье про брейкпоинты для адаптивной вёрстки.

Медиазапросы в собственном CSS

Иногда компонент проще стилизовать в CSS. В v4 брейкпоинты Tailwind можно использовать и там:

.prose-table {
  overflow-x: auto;

  @variant md {
    overflow-x: visible;
  }
}

@variant принимает те же названия вариантов, что и классы, так что @variant lg или @variant dark работают так же. Общий синтаксис медиазапросов описан в статье про медиазапросы CSS.

Другие адаптивные варианты, которые стоит знать

• portrait: и landscape: для ориентации.
• dark: для тёмной темы (на основе prefers-color-scheme, если не настроена стратегия через класс).
• motion-reduce: и motion-safe: для настройки уменьшения движения.
• print: для стилей печати.
• hover: в v4 действует только на устройствах с поддержкой наведения, поэтому эффекты наведения больше не «залипают» после касания на сенсорных экранах.

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

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

<div class="@container">
  <article class="flex flex-col @md:flex-row">...</article>
</div>

Здесь @md: относится к ширине контейнера (по умолчанию 28rem), а не экрана. В v3 нужен официальный плагин @tailwindcss/container-queries.

Как проверить вёрстку на Tailwind на мобильных

В Tailwind легко добавлять брейкпоинты и так же легко забыть их проверить. Во время работы:

1. Держите рядом с редактором вид в размере телефона. Подойдёт режим устройства в Chrome DevTools или Mobile View Extension: оно включается в один клик, работает на localhost и сохраняет рамку телефона при переходах между страницами.
2. В DevTools включите Show media queries на панели устройств, чтобы видеть брейкпоинты Tailwind в виде полос и переключаться между ними.
3. Проверяйте каждый брейкпоинт на его точной ширине и на 1 px меньше, например 767 и 768 px.

Полная методика в статье как проверить адаптивность сайта.

Частые вопросы

Какие брейкпоинты в Tailwind CSS?

По умолчанию: sm 40rem (640 px), md 48rem (768 px), lg 64rem (1024 px), xl 80rem (1280 px) и 2xl 96rem (1536 px). Каждый действует от своей ширины и выше.

Как задать стили только для мобильных в Tailwind?

Пишите мобильные стили без префикса, а на больших размерах переопределяйте их. Если стиль нужен только ниже определённой ширины, используйте вариант max-*, например max-sm: или max-md:.

Медиазапросы Tailwind работают по min-width или max-width?

По min-width. Каждый префикс брейкпоинта по умолчанию действует от своей ширины и выше, это и есть подход mobile first.