Краткая справка

Класс
Свойства
overflow-autooverflow: auto;
overflow-hiddenoverflow: hidden;
overflow-clipoverflow: clip;
overflow-visibleoverflow: visible;
overflow-scrolloverflow: scroll;
overflow-x-autooverflow-x: auto;
overflow-y-autooverflow-y: auto;
overflow-x-hiddenoverflow-x: hidden;
overflow-y-hiddenoverflow-y: hidden;
overflow-x-clipoverflow-x: clip;
overflow-y-clipoverflow-y: clip;
overflow-x-visibleoverflow-x: visible;
overflow-y-visibleoverflow-y: visible;
overflow-x-scrolloverflow-x: scroll;
overflow-y-scrolloverflow-y: scroll;

Основы использования

Отображение содержимого, которое выходит за пределы

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

Andrew Alfred Technical advisor
<div class="overflow-visible ..."></div>

Скрытие переполняющегося содержимого

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

Andrew Alfred Technical advisor
<div class="overflow-hidden ..."></div>

Прокрутка при необходимости

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

Andrew Alfred Technical advisor
Debra Houston Analyst
Jane White Director, Marketing
Ray Flint Technical Advisor
<div class="overflow-auto ..."></div>

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

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

Andrew
Emily
Whitney
David
Kristin
Sarah
<div class="overflow-x-auto ..."></div>

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

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

Andrew Alfred Technical advisor
Debra Houston Analyst
Jane White Director, Marketing
Ray Flint Technical Advisor
<div class="overflow-y-auto h-32 ..."></div>

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

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

Andrew
Emily
Whitney
David
Kristin
Sarah
<div class="overflow-x-scroll ..."></div>

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

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

Andrew Alfred Technical advisor
Debra Houston Analyst
Jane White Director, Marketing
Ray Flint Technical Advisor
<div class="overflow-y-scroll ..."></div>

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

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

Sun
Mon
Tue
Wed
Thu
Fri
Sat
5 AM
6 AM
7 AM
8 AM
9 AM
10 AM
11 AM
12 PM
1 PM
2 PM
3 PM
4 PM
5 PM
6 PM
7 PM
8 PM
5 AM Flight to vancouver Toronto YYZ
6 AM Breakfast Mel's Diner
5 PM 🎉 Party party 🎉 We like to party!
<div class="overflow-scroll ..."></div>

Применяя условно

Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use hover:overflow-scroll to only apply the overflow-scroll utility on hover.

<div class="overflow-auto hover:overflow-scroll">
  <!-- ... -->
</div>

For a complete list of all available state modifiers, check out the Hover, Focus, & Other States documentation.

Контрольные точки и медиа-запросы

You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use md:overflow-scroll to apply the overflow-scroll utility at only medium screen sizes and above.

<div class="overflow-auto md:overflow-scroll">
  <!-- ... -->
</div>

To learn more, check out the documentation on Responsive Design, Dark Mode and other media query modifiers.