Переполнение

Видимость

Используйте overflow-visible, чтобы предотвратить обрезку содержимого внутри элемента. Обратите внимание, что любое содержимое, выходящее за границы элемента, будет тогда видимым.

Авто

Используйте overflow-auto для добавления полос прокрутки к элементу в случае, если его содержимое выходит за границы этого элемента. В отличие от .overflow-scroll, который всегда показывает полосы прокрутки, эта утилита будет показывать их только в том случае, если прокрутка необходима.

Скрытие

Используйте overflow-hidden, чтобы вырезать любое содержимое внутри элемента, выходящее за границы этого элемента.

Скролл по горизонтали при необходимости

Используйте overflow-x-auto, чтобы разрешить горизонтальную прокрутку, если это необходимо.

Скролл по вертикали при необходимости

Используйте overflow-y-auto, чтобы разрешить вертикальную прокрутку, если это необходимо.

Скролл по горизонтали всегда

Используйте overflow-x-scroll, чтобы разрешить горизонтальную прокрутку и всегда показывать полосы прокрутки, если операционная система не отключила всегда видимые полосы прокрутки.

Скролл по вертикали всегда

Используйте overflow-y-scroll, чтобы разрешить вертикальную прокрутку и всегда показывать полосы прокрутки, если операционная система не отключила всегда видимые полосы прокрутки.

Скролл во всех направлениях

Используйте overflow-scroll для добавления полос прокрутки к элементу. В отличие от .overflow-auto, который показывает полосы прокрутки, только если они необходимы, эта утилита всегда показывает их. Обратите внимание, что некоторые операционные системы (например, macOS) скрывают ненужные полосы прокрутки независимо от этого параметра.

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

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

<div class="overflow-auto md:overflow-scroll ...">
  Lorem ipsum dolor sit amet...
</div>

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

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

Варианты

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

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

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

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

Отключение

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

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