Layout
Utilities for controlling how an element handles content that is too large for the container.
Use overflow-visible
to prevent content within an element from being clipped. Note that any content that overflows the bounds of the element will then be visible.
<div class="overflow-visible ..."></div>
Use overflow-hidden
to clip any content within an element that overflows the bounds of that element.
<div class="overflow-hidden ..."></div>
Use overflow-auto
to add scrollbars to an element in the event that its content overflows the bounds of that element. Unlike .overflow-scroll
, which always shows scrollbars, this utility will only show them if scrolling is necessary.
<div class="overflow-auto ..."></div>
Use overflow-x-auto
to allow horizontal scrolling if needed.
<div class="overflow-x-auto ..."></div>
Use overflow-y-auto
to allow vertical scrolling if needed.
<div class="overflow-y-auto h-32 ..."></div>
Use overflow-x-scroll
to allow horizontal scrolling and always show scrollbars unless always-visible scrollbars are disabled by the operating system.
<div class="overflow-x-scroll ..."></div>
Use overflow-y-scroll
to allow vertical scrolling and always show scrollbars unless always-visible scrollbars are disabled by the operating system.
<div class="overflow-y-scroll ..."></div>
Use overflow-scroll
to add scrollbars to an element. Unlike .overflow-auto
, which only shows scrollbars if they are necessary, this utility always shows them. Note that some operating systems (like macOS) hide unnecessary scrollbars regardless of this setting.
<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.