Overflow

Class reference

Visible

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 className="overflow-visible h-16 ...">Lorem ipsum dolor sit amet...</div>

Auto

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 show scrollbars, this utility will only show them if scrolling is necessary.

<div className="overflow-auto h-32 ...">Lorem ipsum dolor sit amet...</div>

Hidden

Use .overflow-hidden to clip any content within an element that overflows the bounds of that element.

<div className="overflow-hidden h-32 ...">Lorem ipsum dolor sit amet...</div>

Scroll horizontally if needed

Use .overflow-x-auto to allow horizontal scrolling if needed.

<div className="overflow-x-auto ...">QrLmmW69vMQD...</div>

Scroll vertically if needed

Use .overflow-y-auto to allow vertical scrolling if needed.

<div className="overflow-y-auto h-32 ...">Lorem ipsum dolor sit amet...</div>

Scroll horizontally always

Use .overflow-x-scroll to allow horizontal scrolling and always show scrollbars unless always-visible scrollbars are disabled by the operating system.

<div className="overflow-x-scroll ...">QrLmmW69vMQD...</div>

Scroll vertically always

Use .overflow-y-scroll to allow vertical scrolling and always show scrollbars unless always-visible scrollbars are disabled by the operating system.

<div className="overflow-y-scroll h-32 ...">Lorem ipsum dolor sit amet...</div>

Scroll in all directions

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 className="overflow-scroll ...">QrLmmW69vMQD...</div>
<div className="overflow-scroll h-32 ...">Lorem ipsum dolor sit amet...</div>
<div className="overflow-scroll h-32 ...">Loremipsumdolorsitamet...</div>

Momentum-based scrolling on touch devices

Use .scrolling-touch to use momentum-based scrolling (where supported) on touch devices.

<div className="scrolling-touch overflow-auto h-32 ...">Lorem ipsum dolor sit amet...</div>

Use .scrolling-auto to use normal non-momentum-based scrolling on touch devices.

This is mostly useful for undoing .scrolling-touch at larger screen sizes.

<div className="scrolling-auto overflow-auto h-32 ...">Lorem ipsum dolor sit amet...</div>

Responsive

To apply an overflow utility only at a specific breakpoint, add a {screen}: prefix to the existing class name. For example, adding the class md:overflow-scroll to an element would apply the overflow-scroll utility at medium screen sizes and above.

For more information about Tailwind's responsive design features, check out the Responsive Design documentation.

null

Customizing

@include('_partials.variants-and-disabling', [ 'utility' => [ 'name' => 'overflow', 'property' => 'overflow', ], 'variants' => [ 'responsive', ], ])