Tailwind Overflow Classes to CSS

Tailwind Overflow Utilities in CSS

Tailwind's overflow classes control how content that exceeds its container is handled. These map directly to the CSS overflow, overflow-x, and overflow-y properties.

All-Direction Overflow

/* overflow-auto */
overflow: auto;

/* overflow-hidden */
overflow: hidden;

/* overflow-visible */
overflow: visible;

/* overflow-scroll */
overflow: scroll;

Axis-Specific Overflow

/* overflow-x-auto */
overflow-x: auto;

/* overflow-x-hidden */
overflow-x: hidden;

/* overflow-x-scroll */
overflow-x: scroll;

/* overflow-y-auto */
overflow-y: auto;

/* overflow-y-hidden */
overflow-y: hidden;

/* overflow-y-scroll */
overflow-y: scroll;

When to Use Each Value

Value	Behavior	Use Case
auto	Shows scrollbar only when content overflows	Scrollable containers, modals
hidden	Clips overflow, no scrollbar	Card images, rounded corners, layout containment
visible	Content overflows freely	Tooltips, dropdowns that extend beyond parent
scroll	Always shows scrollbar	Consistent layout when scroll state changes

Common Patterns

• Rounded card with image: overflow-hidden rounded-lg prevents the image from overflowing the border-radius
• Horizontal scroll container: overflow-x-auto whitespace-nowrap creates a horizontal scrolling area
• Fixed-height scrollable list: overflow-y-auto max-h-64 creates a list that scrolls when it exceeds 16rem height

Scrollbar Behavior

The difference between auto and scroll matters for layout stability. overflow-y-scroll always reserves space for the scrollbar, preventing layout shift when content changes dynamically.