Max-Width — Tailwind CSS

Быстрый справочник

Класс	Свойства
max-w-0	max-width: 0rem; /* 0px */
max-w-none	max-width: none;
max-w-xs	max-width: 20rem; /* 320px */
max-w-sm	max-width: 24rem; /* 384px */
max-w-md	max-width: 28rem; /* 448px */
max-w-lg	max-width: 32rem; /* 512px */
max-w-xl	max-width: 36rem; /* 576px */
max-w-2xl	max-width: 42rem; /* 672px */
max-w-3xl	max-width: 48rem; /* 768px */
max-w-4xl	max-width: 56rem; /* 896px */
max-w-5xl	max-width: 64rem; /* 1024px */
max-w-6xl	max-width: 72rem; /* 1152px */
max-w-7xl	max-width: 80rem; /* 1280px */
max-w-full	max-width: 100%;
max-w-min	max-width: min-content;
max-w-max	max-width: max-content;
max-w-fit	max-width: fit-content;
max-w-prose	max-width: 65ch;
max-w-screen-sm	max-width: 640px;
max-w-screen-md	max-width: 768px;
max-w-screen-lg	max-width: 1024px;
max-w-screen-xl	max-width: 1280px;
max-w-screen-2xl	max-width: 1536px;

Базовое использование

Установка максимальной ширины

Установите максимальную ширину элемента, используя утилиты max-w-{size}.

<div class="max-w-md ...">
  <!-- ... -->
</div>

Чтение ширины

Утилита max-w-prose присваивает элементу максимальную ширину, оптимизированную для удобочитаемости, и адаптируется в зависимости от размера шрифта.

<div class="text-sm max-w-prose ...">
  <p>Oh yeah. It's the best part. It's crunchy, it's explosive, it's where the muffin breaks free of the pan and sort of does it's own thing. I'll tell you. That's a million dollar idea right there. Just sell the tops.</p>
</div>

<div class="text-base max-w-prose ...">
  <p>Oh yeah. It's the best part. It's crunchy, it's explosive, it's where the muffin breaks free of the pan and sort of does it's own thing. I'll tell you. That's a million dollar idea right there. Just sell the tops.</p>
</div>

<div class="text-xl max-w-prose ...">
  <p>Oh yeah. It's the best part. It's crunchy, it's explosive, it's where the muffin breaks free of the pan and sort of does it's own thing. I'll tell you. That's a million dollar idea right there. Just sell the tops.</p>
</div>

Ограничение до ваших точек разрыва

Классы max-w-screen-{breakpoint} могут использоваться для задания элементу максимальной ширины, соответствующей определённой точке разрыва. Эти значения автоматически выводятся из раздела theme.screens вашего файла tailwind.config.js.

<div class="max-w-screen-2xl">
  <!-- ... -->
</div>

Условное применение

Наведение, фокус и другие состояния

Tailwind позволяет условно применять утилиты в различных состояниях с помощью модификаторов вариантов. Например, используйте hover:max-w-lg для применения утилиты max-w-lg только при наведении.

<div class="max-w-sm hover:max-w-lg">
  <!-- ... -->
</div>

Полный список всех доступных модификаторов состояний можно найти в документации Наведение, фокус и другие состояния.

Точки разрыва и медиа-запросы

Также можно использовать модификаторы вариантов для настройки медиа-запросов, таких как адаптивные точки разрыва, тёмная тема, prefers-reduced-motion и многое другое. Например, используйте md:max-w-lg для применения утилиты max-w-lg только для размеров экрана среднего и большего размера.

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

Дополнительную информацию можно найти в документации Респонсивный дизайн, Тёмная тема и других модификаторах медиа-запросов.

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

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

Вы можете настроить шкалу max-width, отредактировав theme.maxWidth или theme.extend.maxWidth в вашем файле tailwind.config.js.

tailwind.config.js

module.exports = {
  theme: {
    extend: {
      maxWidth: {
        '1/2': '50%',
      }
    }
  }
}

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

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

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

<div class="max-w-[50%]">
  <!-- ... -->
</div>

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