Дизайны адаптивных макетов

Обзор

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

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

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

<!-- Width of 16 by default, 32 on medium screens, and 48 on large screens -->
<img class="w-16 md:w-32 lg:w-48" src="...">

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

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

<div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl">
  <div class="md:flex">
    <div class="md:shrink-0">
      <img class="h-48 w-full object-cover md:h-full md:w-48" src="/img/building.jpg" alt="Modern building architecture">
    </div>
    <div class="p-8">
      <div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold">Company retreats</div>
      <a href="#" class="block mt-1 text-lg leading-tight font-medium text-black hover:underline">Incredible accommodation for your team</a>
      <p class="mt-2 text-slate-500">Looking to take your team away on a retreat to enjoy awesome food and take in some sunshine? We have a list of places to do just that.</p>
    </div>
  </div>
</div>

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

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

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

Работа в режиме мобильной первой версии

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

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

Нацеливание на экраны мобильных устройств

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

<!-- This will only center text on screens 640px and wider, not on small screens -->
<div class="sm:text-center"></div>

<!-- This will center text on mobile, and left align it on screens 640px and wider -->
<div class="text-center sm:text-left"></div>

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

Нацеливание на диапазон точек излома

По умолчанию стили, применяемые правилами, такими как md:flex, применяются в этой точке излома и остаются применёнными на более крупных экранах.

Если вы хотите применить утилиту только при активном определённом диапазоне точек излома, используйте адаптивный модификатор, такой как md, вместе с модификатором max-*, чтобы ограничить этот стиль определённым диапазоном:

<div class="md:max-xl:flex">
  <!-- ... -->
</div>

Tailwind генерирует соответствующий модификатор max-* для каждой точки излома, поэтому изначально доступны следующие модификаторы:

Нацеливание на отдельную точку излома

Чтобы нацелиться на отдельную точку излома, необходимо нацелиться на диапазон этой точки излома, объединив адаптивный модификатор, такой как md, с модификатором max-* для следующей точки излома:

<div class="md:max-lg:flex">
  <!-- ... -->
</div>

Узнайте больше о нацеливании на диапазоны точек излома.

Использование пользовательских точек излома

Настройка вашей темы

Вы можете полностью настроить свои точки излома в файле 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) { ... }
    },
  }
}

Узнайте больше в документации по настройке точек излома.

Произвольные значения

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

<div class="min-[320px]:text-center max-[600px]:bg-sky-300">
  <!-- ... -->
</div>

Узнайте больше об использовании произвольных значений в документации произвольных значений.