Overflow X

Controls how an element behaves when content overflows on the X-axis.

Class	Style
`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;`

Visible

Initial value

Ensures that any content overflowing horizontally remains visible outside the container.

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

Auto

Allows the content to scroll horizontally if it overflows the container, while hiding the scrollbar when not needed.

<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

Clips the content that overflows horizontally, preventing it from being displayed or scrolled.

<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

Hides any content that overflows horizontally, ensuring it is not visible or scrollable.

<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

Enables a horizontal scrollbar for the container, allowing users to scroll through the content even if it doesn’t overflow.

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

Using utility variants

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

Using media queries

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

Using hover states

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