Control clipping and scrolling per axis: overflow-auto, hidden, visible, scroll, plus overscroll behavior. This family contains 25 generated classes in Nakshora 3.1.

Classes#

ClassGenerated CSS
overflow-ellipsistext-overflow: ellipsis;
overflow-autooverflow: auto;
overflow-hiddenoverflow: hidden;
overflow-clipoverflow: clip;
overflow-visibleoverflow: visible;
overflow-scrolloverflow: scroll;
overflow-x-autooverflow-x: auto;
overflow-y-autooverflow-y: auto;
overflow-x-hiddenoverflow-x: hidden;
overflow-y-hiddenoverflow-y: hidden;
overflow-x-clipoverflow-x: clip;
overflow-y-clipoverflow-y: clip;
overflow-x-visibleoverflow-x: visible;
overflow-y-visibleoverflow-y: visible;
overflow-x-scrolloverflow-x: scroll;
overflow-y-scrolloverflow-y: scroll;
overscroll-autooverscroll-behavior: auto;
overscroll-containoverscroll-behavior: contain;
overscroll-noneoverscroll-behavior: none;
overscroll-y-autooverscroll-behavior-y: auto;
overscroll-y-containoverscroll-behavior-y: contain;
overscroll-y-noneoverscroll-behavior-y: none;
overscroll-x-autooverscroll-behavior-x: auto;
overscroll-x-containoverscroll-behavior-x: contain;
overscroll-x-noneoverscroll-behavior-x: none;

Example#

example
html
<div class="overflow-x-auto">
  <table class="min-w-full">…</table>
</div>

Responsive & variants#

Every class here accepts screen prefixes (xxs: … 5xl:) and state variants — md:hover:p-4 style stacks compile to a single media query. See responsive/index|Responsive design and variants/index|Variants.

Best practices#

  • overflow-x-auto is the standard responsive-table wrapper
  • overscroll-contain stops scroll chaining on modals and drawers

Common mistakes#

  • overflow: hidden on body breaks position: sticky descendants

utilities/spacing/margin|Margin · utilities/sizing/width|Width · responsive/index|Responsive