Overflow

Control how content behaves when it exceeds its container bounds. Overflow utilities work on both axes together or individually.

.overflow-auto - Show scrollbars only when content overflows

.overflow-hidden - Clip overflowing content (no scrollbars)

.overflow-visible - Content overflows container visibly

.overflow-scroll - Always show scrollbars (even if not needed)

.overflow-x-auto - Horizontal scrollbar when needed

.overflow-x-hidden - Clip horizontal overflow

.overflow-x-visible - Allow horizontal overflow

.overflow-x-scroll - Always show horizontal scrollbar

.overflow-y-auto - Vertical scrollbar when needed

.overflow-y-hidden - Clip vertical overflow

.overflow-y-visible - Allow vertical overflow

.overflow-y-scroll - Always show vertical scrollbar

Scrollable containers: Use .overflow-auto or axis-specific variants for clean scrolling without permanent scrollbars

Prevent layout shift: Use .overflow-hidden to clip content without affecting layout

Horizontal carousels: Combine .overflow-x-auto with flexbox for touch-friendly scrolling

Fixed-height panels: Set height with .overflow-y-auto for vertical scrolling within constrained space

Prefer auto over scroll in most cases. The auto variants only show scrollbars when content overflows, creating cleaner interfaces.