Брейкпоинты и mobile-first

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

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

Брейкпоинты-префиксы

Чтобы применить класс только на экранах от определённой ширины, добавьте префикс через двоеточие:

Как читать адаптивные классы

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

<div class="text-center md:text-left">Заголовок</div>

Читается так: «по умолчанию текст по центру; начиная с md (768px) — по левому краю». На телефоне заголовок отцентрован, на планшете и шире — прижат влево.

Перестроение колонок

Классический сценарий — блоки, которые на телефоне идут столбцом, а на десктопе встают в ряд:

<div class="flex flex-col md:flex-row gap-4">
  <div>Сайдбар</div>
  <div>Контент</div>
</div>

На узком экране сайдбар окажется над контентом (столбец), а от md они встанут рядом (ряд). Заметьте: мы не писали ни одного медиа-запроса вручную.

Почему именно mobile-first

Поскольку база — это мобильный вид, вы сначала описываете самый простой случай (узкий экран), а затем добавляете усложнения для широких. Это и удобнее, и надёжнее: если забыть про большие экраны, сайт всё равно останется рабочим на мобильном — а это сегодня большинство пользователей.

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

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

Итог

• Префиксы sm/md/lg/xl: включают стиль начиная с указанной ширины и выше.
• Класс без префикса — база для всех экранов (самый узкий), префиксы её переопределяют.
• Mobile-first: сначала мобильный вид, потом усложнения для широких экранов.