Адаптивность: префиксы контрольных точек

Адаптивная вёрстка меняет раскладку в зависимости от ширины экрана. Вместо медиазапросов в CSS Tailwind даёт префиксы: md:grid-cols-3 значит «три колонки, если экран не уже 768 пикселей».

Контрольные точки

Контрольная точка (breakpoint) — ширина экрана, начиная с которой включаются другие стили. В Tailwind их пять:

Префикс	Минимальная ширина	Медиазапрос
`sm:`	640px	`@media (width >= 40rem)`
`md:`	768px	`@media (width >= 48rem)`
`lg:`	1024px	`@media (width >= 64rem)`
`xl:`	1280px	`@media (width >= 80rem)`
`2xl:`	1536px	`@media (width >= 96rem)`

Mobile-first

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

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<p class="bg-rose-200 p-4 sm:bg-amber-200 md:bg-emerald-200">
  Измените ширину окна браузера
</p>

Сделайте окно браузера узким, а потом широким: фон меняется с розового на жёлтый и на зелёный. Пример находится внутри страницы урока, поэтому ширина считается по его области, а не по всему окну.

Адаптивный каталог

Сетка товаров: одна колонка на телефоне, две на планшете, три на компьютере:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
  <div class="rounded-lg bg-white p-4 shadow">Наушники — $79</div>
  <div class="rounded-lg bg-white p-4 shadow">Колонка — $45</div>
  <div class="rounded-lg bg-white p-4 shadow">Зарядка — $19</div>
</div>

Префикс работает с любой утилитой — отступами, размерами шрифта, видимостью. Например, hidden md:block скрывает элемент на телефоне и показывает на широких экранах.

Карточка в строку

На широком экране карточку товара удобно развернуть горизонтально: картинка слева, текст справа:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<div class="overflow-hidden rounded-xl bg-white shadow-lg sm:flex">
  <img src="/media/photo-400x250.jpg" alt="Наушники" class="h-48 w-full object-cover sm:h-auto sm:w-48">
  <div class="p-6">
    <h2 class="text-lg font-semibold">Беспроводные наушники</h2>
    <p class="mt-2 text-sm text-gray-600">Шумоподавление и 30 часов работы.</p>
    <p class="mt-4 text-xl font-bold">$79</p>
  </div>
</div>

На узком экране картинка сверху на всю ширину, на широком — sm:flex ставит её в ряд с текстом.

Только до точки

Префикс max- ограничивает стиль шириной меньше точки: max-md:hidden скрывает элемент на экранах уже 768 пикселей. Префиксы сочетаются в диапазон: md:max-xl:flex действует только между md и xl.

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

Думать, что sm: означает «на маленьких экранах»:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<p class="sm:text-center">Только на телефоне?</p>

На самом деле sm:text-center включается от 640 пикселей и шире, а на телефоне не действует. Стиль для телефона пишут без префикса, а на больших экранах его переопределяют: text-center sm:text-left.

Спасибо, что читаете!