Overflow

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.

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

Scroll horizontally if needed

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-y-scroll to allow vertical scrolling and always show scrollbars unless always-visible scrollbars are disabled by the operating system.

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.

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.

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

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

Customizing

Variants

默認情況下, 只有 響應式 的 overflow 變化模式 (variants) 會產生。

在 tailwind.config.js 的 variants 區塊中變更 overflow 屬性來決定有哪些變化模式會生成。

舉個例子來說，這個設定將會生成 響應式 和 hover 的變化模式。

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

Disabling

如果你不打算在專案中使用 overflow 功能，可以在你的設定檔裡的 corePlugins 屬性中將 overflow 設定為 false 來停用功能：

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