Overflow

Class	Style
o-auto	overflow: auto;
o-c	overflow: clip;
o-h	overflow: hidden;
o-s	overflow: scroll;
o-v	overflow: visible;

Visible

Initial value

The content will overflow the container and be visible outside of it.

This content overflows the container and is fully visible.

<div class="bg-indigo-2 h-32 o-v p-4">
  <div class="bg-indigo h-64 p-4 tc-white">This content overflows the container and is fully visible.</div>
</div>

Auto

The element will add scrollbars if the content overflows the container.

Try scrolling through the container to see how the overflow behaves.

This content overflows the container.

<div class="bg-indigo-2 h-32 o-auto p-4">
  <div class="bg-indigo h-64 p-4 tc-white">This content overflows the container.</div>
</div>

Clip

The content that overflows the container will be clipped and not visible.

This content is clipped and cannot be scrolled.

<div class="bg-indigo-2 h-32 o-c p-4">
  <div class="bg-indigo h-64 p-4 tc-white">This content is clipped and cannot be scrolled.</div>
</div>

Hidden

The content that overflows the container will be hidden and not visible, without scrollbars.

This content is hidden when it overflows.

<div class="bg-indigo-2 h-32 o-h p-4">
  <div class="bg-indigo h-64 p-4 tc-white">This content is hidden when it overflows.</div>
</div>

Scroll

The element will always show scrollbars, regardless of whether the content overflows.

This content overflows the container, and scrollbars are always visible.

<div class="bg-indigo-2 h-32 o-s p-4">
  <div class="bg-indigo h-64 p-4 tc-white">This content overflows the container, and scrollbars are always visible.</div>
</div>

Conditional styles

Learn how to override existing utilities based on the user’s screen size or other factors, such as hover states.

Breakpoint variant

You can combine responsive breakpoints like sm:o-*,md:o-*, lg:o-*, and xxl:o-* to allow targeting specific utilities in different viewports.

<div class="o-h md:o-auto ..."></div>

Hover variant

Alternatively, you can apply :hover by using h:o-* utility to override elements and change their values when hovering over them.

<div class="o-h h:o-auto ..."></div>