Visible Default

Use to prevent content within an element from being clipped. Note that any content that overflows the bounds of the element will then be visible.

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.

Hidden

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

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

Scroll vertically if needed

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

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.

Scroll vertically always

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.

Momentum-based scrolling on touch devices

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

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.

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 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 documentation.

all

sm

md

lg

xl

Customizing

By default, only responsive variants are generated for overflow utilities.

You can control which variants are generated for the overflow utilities by modifying the overflow property in the modules section of your Tailwind config file.

For example, this config will also generate hover and focus variants:

Disabling