Основные концепции
Использование адаптивных утилит для построения адаптивных пользовательских интерфейсов.
Каждая утилита в Tailwind может применяться условно на разных брейкпоинтах, что позволяет легко строить сложные адаптивные интерфейсы, не выходя из HTML.
Сначала убедитесь, что вы добавили мета-тег viewport в <head> вашего документа:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />Чтобы применить утилиту только на определённом брейкпоинте, просто добавьте к ней префикс с именем брейкпоинта и двоеточием:
<!-- Ширина 16 по умолчанию, 32 на средних экранах и 48 на больших --><img class="w-16 md:w-32 lg:w-48" src="..." />По умолчанию есть пять брейкпоинтов, вдохновлённых распространёнными разрешениями устройств:
| Префикс брейкпоинта | Минимальная ширина | CSS |
|---|---|---|
sm | 40rem (640px) | @media (width >= 40rem) { ... } |
md | 48rem (768px) | @media (width >= 48rem) { ... } |
lg | 64rem (1024px) | @media (width >= 64rem) { ... } |
xl | 80rem (1280px) | @media (width >= 80rem) { ... } |
2xl | 96rem (1536px) | @media (width >= 96rem) { ... } |
Это работает для каждой утилиты фреймворка, то есть вы можете изменять буквально что угодно на любом брейкпоинте — даже такие вещи, как межбуквенное расстояние или стили курсора.
Вот простой пример компонента маркетинговой страницы, который использует вертикальную компоновку на маленьких экранах и горизонтальную — на больших:
<!-- [!code word:md:max-w-2xl] --><div class="mx-auto max-w-md overflow-hidden rounded-xl bg-white shadow-md md:max-w-2xl"> <!-- [!code word:md:flex] --> <div class="md:flex"> <!-- [!code word:md:shrink-0] --> <div class="md:shrink-0"> <!-- [!code word:md:h-full] --> <!-- [!code word:md:w-48] --> <img class="h-48 w-full object-cover md:h-full md:w-48" src="/img/building.jpg" alt="Современная архитектура здания" /> </div> <div class="p-8"> <div class="text-sm font-semibold tracking-wide text-indigo-500 uppercase">Корпоративные ретриты</div> <a href="#" class="mt-1 block text-lg leading-tight font-medium text-black hover:underline"> Невероятное размещение для вашей команды </a> <p class="mt-2 text-gray-500"> Хотите увезти команду на ретрит, чтобы насладиться отличной едой и солнцем? У нас есть список мест для этого. </p> </div> </div></div>Вот как работает пример выше:
div — это display: block, но с помощью утилиты md:flex он становится display: flex на средних экранах и больше.md:shrink-0 для предотвращения сжатия на средних экранах и больше. Технически можно было бы использовать просто shrink-0, но так понятнее.md:h-full md:w-48.В этом примере использован только один брейкпоинт, но вы легко можете кастомизировать компонент и для других размеров с помощью префиксов sm, lg, xl или 2xl.
Tailwind использует mobile-first систему брейкпоинтов, как и другие популярные фреймворки.
Это значит, что утилиты без префикса (например, uppercase) применяются на всех экранах, а с префиксом (например, md:uppercase) — только на указанном брейкпоинте и выше.
Чаще всего ошибка — попытка стилизовать мобильную версию с помощью sm:. Не думайте о sm: как о "маленьких экранах", это именно "маленький брейкпоинт".
Не используйте sm: для стилизации мобильных устройств
<!-- Это выровняет текст по центру только на экранах 640px и шире, а не на мобильных --><div class="sm:text-center"></div>Используйте утилиты без префикса для мобильных, а на больших экранах переопределяйте их
<!-- Это выровняет текст по центру на мобильных, а на экранах 640px и шире — по левому краю --><div class="text-center sm:text-left"></div>Поэтому часто лучше сначала реализовать мобильную версию, а затем добавлять изменения для sm, md и т.д.
По умолчанию стили, применённые через md:flex, будут работать на этом брейкпоинте и выше.
Если нужно применить утилиту только в определённом диапазоне, комбинируйте префикс брейкпоинта с max-*:
<div class="md:max-xl:flex"> <!-- ... --></div>Tailwind генерирует соответствующий вариант max-* для каждого брейкпоинта, например:
| Вариант | Media query |
|---|---|
max-sm | @media (width < 40rem) { ... } |
max-md | @media (width < 48rem) { ... } |
max-lg | @media (width < 64rem) { ... } |
max-xl | @media (width < 80rem) { ... } |
max-2xl | @media (width < 96rem) { ... } |
Чтобы применить стиль только на одном брейкпоинте, комбинируйте префикс брейкпоинта с max-* для следующего брейкпоинта:
<div class="md:max-lg:flex"> <!-- ... --></div>Подробнее — в разделе про диапазоны брейкпоинтов.
Используйте переменные темы --breakpoint-* для настройки брейкпоинтов:
@import "tailwindcss";@theme { --breakpoint-xs: 30rem; --breakpoint-2xl: 100rem; --breakpoint-3xl: 120rem;}Это обновит брейкпоинт 2xl до 100rem вместо 96rem по умолчанию и добавит новые xs и 3xl, которые можно использовать в разметке:
<!-- [!code word:xs:grid-cols-2] --><!-- [!code word:3xl:grid-cols-6] --><div class="grid xs:grid-cols-2 3xl:grid-cols-6"> <!-- ... --></div>Важно всегда использовать одну и ту же единицу измерения для всех брейкпоинтов, иначе порядок применения утилит может быть неожиданным.
Tailwind по умолчанию использует rem, поэтому если добавляете свои брейкпоинты — используйте тоже rem.
Подробнее о кастомизации темы — в документации по теме.
Чтобы удалить стандартный брейкпоинт, сбросьте его значение на initial:
@import "tailwindcss";@theme { --breakpoint-2xl: initial;}Можно сбросить все стандартные брейкпоинты с помощью --breakpoint-*: initial, а затем определить свои:
@import "tailwindcss";@theme { --breakpoint-*: initial; --breakpoint-tablet: 40rem; --breakpoint-laptop: 64rem; --breakpoint-desktop: 80rem;}Подробнее — в документации по теме.
Если нужно использовать разовый брейкпоинт, который не имеет смысла добавлять в тему, используйте варианты min или max с любым значением:
<!--:text-center] --><!--:bg-sky-300] --><div class="max-[600px]:bg-sky-300 min-[320px]:text-center"> <!-- ... --></div>Подробнее — в документации по произвольным значениям.
Контейнерные запросы — современная возможность CSS, позволяющая стилизовать элемент в зависимости от размера родителя, а не всего окна. Это делает компоненты более переносимыми и переиспользуемыми.
Используйте класс @container для пометки элемента как контейнера, а затем варианты типа @sm и @md для стилизации дочерних элементов в зависимости от размера контейнера:
<!-- [!code word:@md:flex-row] --><div class="@container"> <div class="flex flex-col @md:flex-row"> <!-- ... --> </div></div>Как и брейкпоинты, контейнерные запросы в Tailwind mobile-first и применяются при достижении размера контейнера и выше.
Используйте варианты типа @max-md для применения стиля ниже определённого размера контейнера:
<!-- [!code word:@max-md:flex-col] --><div class="@container"> <div class="flex flex-row @max-md:flex-col"> <!-- ... --> </div></div>Комбинируйте обычный вариант с max-width для применения стиля только в определённом диапазоне:
<!-- [!code word:@sm:@max-md:flex-col] --><div class="@container"> <div class="flex flex-row @sm:@max-md:flex-col"> <!-- ... --> </div></div>Для сложных макетов с несколькими вложенными контейнерами можно использовать имена контейнеров через @container/{name} и таргетировать их с помощью вариантов типа @sm/{name} и @md/{name}:
<!-- [!code word:@sm/main:flex-col] --><div class="@container/main"> <!-- ... --> <div class="flex flex-row @sm/main:flex-col"> <!-- ... --> </div></div>Это позволяет стилизовать элемент в зависимости от размера не только ближайшего, но и любого другого контейнера.
Используйте переменные темы --container-* для настройки размеров контейнеров:
@import "tailwindcss";@theme { --container-8xl: 96rem;}Это добавит новый вариант контейнерного запроса 8xl, который можно использовать в разметке:
<!-- [!code word:@8xl:flex-row] --><div class="@container"> <div class="flex flex-col @8xl:flex-row"> <!-- ... --> </div></div>Подробнее — в документации по теме.
Используйте варианты типа @min-[475px] и @max-[960px] для разовых размеров контейнеров:
<!--:flex-row] --><div class="@container"> <div class="flex flex-col @min-[475px]:flex-row"> <!-- ... --> </div></div>Используйте единицы длины контейнера типа cqw как произвольные значения в других утилитах для ссылки на размер контейнера:
<div class="@container"> <div class="w-[50cqw]"> <!-- ... --> </div></div>По умолчанию Tailwind включает размеры контейнеров от 16rem (256px) до 80rem (1280px):
| Вариант | Минимальная ширина | CSS |
|---|---|---|
@3xs | 16rem (256px) | @container (width >= 16rem) { … } |
@2xs | 18rem (288px) | @container (width >= 18rem) { … } |
@xs | 20rem (320px) | @container (width >= 20rem) { … } |
@sm | 24rem (384px) | @container (width >= 24rem) { … } |
@md | 28rem (448px) | @container (width >= 28rem) { … } |
@lg | 32rem (512px) | @container (width >= 32rem) { … } |
@xl | 36rem (576px) | @container (width >= 36rem) { … } |
@2xl | 42rem (672px) | @container (width >= 42rem) { … } |
@3xl | 48rem (768px) | @container (width >= 48rem) { … } |
@4xl | 56rem (896px) | @container (width >= 56rem) { … } |
@5xl | 64rem (1024px) | @container (width >= 64rem) { … } |
@6xl | 72rem (1152px) | @container (width >= 72rem) { … } |
@7xl | 80rem (1280px) | @container (width >= 80rem) { … } |