Максимальная ширина

Справочник классов по умолчанию

Класс	Свойства
max-w-0	max-width: 0rem;
max-w-none	max-width: none;
max-w-xs	max-width: 20rem;
max-w-sm	max-width: 24rem;
max-w-md	max-width: 28rem;
max-w-lg	max-width: 32rem;
max-w-xl	max-width: 36rem;
max-w-2xl	max-width: 42rem;
max-w-3xl	max-width: 48rem;
max-w-4xl	max-width: 56rem;
max-w-5xl	max-width: 64rem;
max-w-6xl	max-width: 72rem;
max-w-7xl	max-width: 80rem;
max-w-full	max-width: 100%;
max-w-min	max-width: min-content;
max-w-max	max-width: max-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 mx-auto ...">
  <!-- ... -->
</div>

Ширина чтения

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

Dolore iste eaque molestias. Eius iure ut eaque accusantium. Voluptas repellendus nobis. Saepe nam accusantium magni veniam qui enim mollitia excepturi sapiente.

<div class="text-sm max-w-prose ...">
  <p>Dolore iste eaque molestias. Eius iure ut eaque accusantium. Voluptas repellendus nobis. Saepe nam accusantium magni veniam qui enim mollitia excepturi sapiente.</p>
</div>

<div class="text-base max-w-prose ...">
  <p>Dolore iste eaque molestias. Eius iure ut eaque accusantium. Voluptas repellendus nobis. Saepe nam accusantium magni veniam qui enim mollitia excepturi sapiente.</p>
</div>

<div class="text-xl max-w-prose ...">
  <p>Dolore iste eaque molestias. Eius iure ut eaque accusantium. Voluptas repellendus nobis. Saepe nam accusantium magni veniam qui enim mollitia excepturi sapiente.</p>
</div>

Ограничение ваших контрольных точек

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

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

Адаптивность

Чтобы контролировать максимальную ширину элемента в определенной контрольной точке, добавьте префикс {screen}: к любой существующей утилите максимальной ширины.

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

Для получения дополнительной информации о функциях адаптивного дизайна Tailwind ознакомьтесь с документацией Адаптивного дизайна.

Кастомизация

Шкала максимальной ширины

Настройте шкалу максимальной ширины Tailwind по умолчанию для классов max-w-* в разделе theme.maxWidth вашего файла tailwind.config.js.

  // tailwind.config.js
  module.exports = {
    theme: {
      maxWidth: {
+       '1/4': '25%',
+       '1/2': '50%',
+       '3/4': '75%',
      }
    }
  }

Классы max-w-screen-* происходят из раздела theme.screens вашего файла tailwind.config.js.

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

Варианты

По умолчанию, только responsive варианты создаются для утилит max-width.

Вы можете контролировать, какие варианты создаются для утилит max-width для изменения свойства maxWidth в разделе variants Вашего файла конфигурации tailwind.config.js.

Например, эта конфигурация также будет генерировать варианты hover и focus:

  // tailwind.config.js
  module.exports = {
    variants: {
      extend: {
        // ...
+       maxWidth: ['hover', 'focus'],
      }
    }
  }

Отключение

Если Вы не планируете использовать в своем проекте утилиты для изменения max-width, Вы можете полностью отключить их, установив для maxWidth свойство значение false в разделе corePlugins Вашего файла конфигурации:

  // tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...
+     maxWidth: false,
    }
  }