Overflow

Utilities for controlling how an element handles content that is too large for the container.

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

<div class="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 class="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 class="overflow-x-auto ...">QrLmmW69vMQD...</div>

Scroll vertically if needed

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

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

all

sm

md

lg

xl

<div class="overflow-auto sm:overflow-visible md:overflow-hidden lg:overflow-x-scroll xl:overflow-y-scroll ...">
  Lorem ipsum dolor sit amet...
</div>

QrLmmW69vMQDtCOg48jidqvvWD2FzDt7I7bBoDc98SRP5OwvOScVYbRzFdfp540eF5v1pjogYkyI8NXqu4wY8chgsXIV0LU7XQKWJ98wLaBSHWiBhvkEU1T3sd6KEFo53CLjVjIz8UvZajb8sbsu62xTsF9cRtFdwEvusq6zJHvedymDCUkY6qXHsuL6fOmHo4KKMurZuJZrK3plRPUaI8XVciz8dVq5CEUXjMrTcB76H1w90CnkRER3nYjs3suTa3223xs8aL97m0peQfjlvKbF8HcmQG5mHEitCn1QZnbMZUK3zE9AIjwcVXP7R9V4fw2A93cZD7wj333X6aaiHZdkkTPtst0u05KSob5c0ZuKQi4D3V395NfFKKr8cR27jmpB7dqK2GiWXeOQUFcjmFVwlHWSlH8ZdUoVJpXf1xL6CRUxwZP4EhBbqQZaJm26ijWII6LRxJ5eVU9Y7KKvQsUeX5BawtgeMWRmjeCwQadTLTQG8gLpi2DvGpMtPWCdqHgEglVSB1ZlDrjEEsXYrNx1IOY0053K3pWNaR1ezyz8kahRfNs3byaHcIQu9tWTrcMpBWhZ45DzLjVV1N8Zt96uLnNWK5DvbKW8GgMuwY7fHkZFz85MN4d2gL0j85HmXGx9oPTFRkPWsmMOHUvm5IhB7QqGSAwT1uL7HgBrNX9a1BAWrp9zV1IWAd1q65sKOOCxTZrXJDpxBxYE4rJAGU6pcri9mUf4g49ZiIAwfu9njtZyYimmImCa6TFhk2jQcSmFDHacExxqC2BfYATHFrKSy94dbw6uWT52nM7MSM9JDu4cs9cbfnaf6amt4hTUotCTONg604b8JKPI1sfd4CG36fBNcnErhpllfRlXkY1xFwmwZT7IJV8okPGNQdTKpdPJOBGw3LHMKojPJl1nPiQB5C9bdePFMNLejSXY5DDvO70ehOCJpBtKZY2quoFJJjGfXe8T4DuGYGmM6JYd5DNinWZuUWXGvfIlJRHgf8BQNQvtmEzqGXIeQZitiq9F Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eleifend rutrum auctor. Phasellus convallis sagittis augue ut ornare. Vestibulum et gravida lectus, sed ultrices sapien. Nullam aliquet elit dui, vitae hendrerit lectus volutpat eget. In porttitor tincidunt egestas. Pellentesque laoreet ligula at est vulputate facilisis. Etiam tristique justo ut odio placerat ornare. Cras bibendum, orci at ornare tincidunt, lacus nunc gravida enim, sit amet euismod nunc lectus in lectus. Ut dictum nulla et arcu aliquet ornare. Aliquam et dapibus lectus. Aenean mattis elit mi, sed ultricies augue consectetur id. Sed id magna malesuada, luctus urna a, bibendum tortor. Cras cursus cursus ex. Nulla fringilla elit vitae imperdiet scelerisque. Donec ac sem eu diam convallis mollis a sed leo. Proin congue augue turpis, eget rutrum dolor ultricies non. Nulla blandit venenatis dapibus. Sed tincidunt mollis elit, quis suscipit nibh eleifend quis. Donec ex lorem, auctor eu rutrum in, blandit id dolor. Nulla molestie arcu turpis. In id felis vulputate, tempor massa eget, malesuada mauris. Quisque fringilla consequat metus, luctus scelerisque leo fringilla vel.

Customizing

Responsive and pseudo-class variants

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 variants section of your tailwind.config.js file.

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

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

Disabling

If you don’t plan to use the overflow utilities in your project, you can disable them entirely by setting the overflow property to false in the corePlugins section of your config file:

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

← Object Position   Overscroll Behavior →