Адаптивный дизайн

Обзор

Каждый служебный класс в Tailwind можно условно применять в разных контрольных точках, что упрощает создание сложных адаптивных интерфейсов, не покидая своего HTML.

По умолчанию существует пять контрольных точек, основанных на общих разрешениях устройств:

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

<!-- Ширина 16 по умолчанию, 32 на средних экранах и 48 на больших экранах. -->
<img class="w-16 md:w-32 lg:w-48" src="...">

Это работает для каждого служебного класса в структуре, что означает, что вы можете изменить буквально что угодно в заданной контрольной точке - даже такие вещи, как межбуквенный интервал или стили курсора.

Вот простой пример компонента маркетинговой страницы, в котором используется составной макет на маленьких экранах и горизонтальный макет на больших экранах (измените размер браузера, чтобы увидеть его в действии):

Вот как работает приведенный выше пример:

• По умолчанию внешний div - это display: block, но при добавлении утилиты md:flex он становится display: flex на средних и больших экранах.
• Когда родительский элемент является гибким контейнером, мы хотим убедиться, что изображение никогда не сжимается, поэтому мы добавили md:flex-shrink-0, чтобы предотвратить сжатие на средних и больших экранах. Технически мы могли бы просто использовать flex-shrink-0, так как он ничего не сделает на экранах меньшего размера, но поскольку это имеет значение только на экранах md, неплохо было бы четко указать это в имени класса.
• На маленьких экранах по умолчанию изображение автоматически становится полноширинным. На средних экранах и выше мы ограничили ширину фиксированным размером и обеспечили полную высоту изображения с помощью md:h-full md:w-48.

В этом примере мы использовали только одну контрольную точку, но вы можете легко настроить этот компонент для других размеров, используя префиксы реагирования sm, lg, xl или 2xl.

Сначала мобильные

По умолчанию Tailwind использует систему мобильной первой контрольной точки, аналогичную той, к которой Вы, возможно, привыкли в других фреймворках, таких как Bootstrap.

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

Ориентация на мобильные экраны

Чаще всего этот подход удивляет людей тем, что для стилизации чего-либо для мобильных устройств вам нужно использовать версию утилиты без префикса, а не версию с префиксом sm:. Не думайте, что sm: означает «на маленьких экранах», думайте об этом как «в маленькой контрольной точке».

<!-- Это позволит центрировать текст на мобильном устройстве и выровнять его по левому краю на экранах 640 пикселей и шире -->
<div class="text-center sm:text-left"></div>

По этой причине часто бывает хорошей идеей сначала реализовать мобильный макет для дизайна, а затем наслоить любые изменения, которые имеют смысл для экранов sm, затем экранов md и т.д.

Ориентация на одну контрольную точку

Контрольные точки Tailwind включают только min-width и не включают max-width, что означает, что любые утилиты, которые вы добавляете в меньшую контрльную точку, также будут применяться к более крупным контрольным точкам.

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

Вот пример, в котором цвет фона красный в контрольной точке md, но зеленый в каждой другой контрольной точке:

<div class="bg-green-500 md:bg-red-500 lg:bg-green-500">
  <!-- ... -->
</div>

Обратите внимание, что нам не нужно было указывать цвет фона для контрольной точки sm или контрольную тчоку xl — вам нужно только указать, когда утилита должна начать действовать, а не когда она должна остановиться.

Кастомизация контрольных точек

Вы можете полностью настроить контрольные точки в файле tailwind.config.js:

// tailwind.config.js
module.exports = {
  theme: {
    screens: {
      'tablet': '640px',
      // => @media (min-width: 640px) { ... }

      'laptop': '1024px',
      // => @media (min-width: 1024px) { ... }

      'desktop': '1280px',
      // => @media (min-width: 1280px) { ... }
    },
  }
}

Дополнительные сведения смотрите в документации по настройке контрольных точек.