Overflow X

Utility	Properties
o-x-auto	overflow-x: auto;
o-x-c	overflow-x: clip;
o-x-h	overflow-x: hidden;
o-x-s	overflow-x: scroll;
o-x-v	overflow-x: visible;

Auto

This example sets the horizontal overflow behavior to auto. The o-x-auto utility allows the content to scroll horizontally if it overflows the container, while hiding the scrollbar when not needed.

This content overflows horizontally.

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

Clip

This example sets the horizontal overflow behavior to clip. The o-x-c utility clips the content that overflows horizontally, preventing it from being displayed or scrolled.

This content is clipped and cannot be scrolled horizontally.

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

Hidden

This example sets the horizontal overflow behavior to hidden. The o-x-h utility hides any content that overflows horizontally, ensuring it is not visible or scrollable.

This content is hidden when it overflows horizontally.

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

Scroll

This example sets the horizontal overflow behavior to scroll. The o-x-s utility enables a horizontal scrollbar for the container, allowing users to scroll through the content even if it doesn’t overflow.

This content overflows the container, and a horizontal scrollbar is always visible.

<div class="bg-indigo-2 h-32 o-x-s p-4 w-64">
  <div class="bg-indigo p-4 tc-white w-96">This content overflows the container, and a horizontal scrollbar is always visible.</div>
</div>

Visible

Initial value

This example sets the horizontal overflow behavior to visible. The o-x-v utility ensures that any content overflowing horizontally remains visible outside the container.

This content overflows the container and is fully visible horizontally.

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

Conditional styles

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

Media modifier

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

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

Hover modifier

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

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