0
0
Tailwindmarkup~5 mins

Overflow handling in Tailwind

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Overflow handling helps control what happens when content is too big for its container. It keeps your page neat and easy to read.

When text or images are bigger than their box and you want to hide the extra part.
When you want to add scroll bars to see hidden content inside a small area.
When you want to show all content but keep the container size fixed.
When you want to prevent content from spilling outside a card or section.
When you want to create a neat layout that adapts to different screen sizes.
Syntax
Tailwind
overflow-auto
overflow-hidden
overflow-visible
overflow-scroll
overflow-x-auto
overflow-y-hidden

overflow-auto adds scrollbars only if needed.

overflow-hidden hides anything outside the container.

Examples
This box hides extra text that does not fit inside.
Tailwind
<div class="w-40 h-20 overflow-hidden border border-gray-400">
  This text is very long and will be cut off because of overflow-hidden.
</div>
This box adds scrollbars so you can scroll to see all the text.
Tailwind
<div class="w-40 h-20 overflow-auto border border-gray-400">
  This text is very long and will show scrollbars if needed.
</div>
This box always shows scrollbars, even if not needed.
Tailwind
<div class="w-40 h-20 overflow-scroll border border-gray-400">
  This text is very long and always shows scrollbars.
</div>
This box scrolls horizontally but hides vertical overflow.
Tailwind
<div class="w-40 h-20 overflow-x-auto overflow-y-hidden border border-gray-400">
  This text is very long horizontally but clipped vertically.
</div>
Sample Program

This example shows four boxes with different overflow settings using Tailwind CSS. Each box has a fixed width and height with a border so you can see the container edges. The text inside is long to demonstrate how overflow works.

Tailwind
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Overflow Handling Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-6">
  <h1 class="text-xl font-semibold mb-4">Overflow Handling with Tailwind CSS</h1>

  <section class="mb-6">
    <h2 class="font-bold mb-2">Overflow Hidden</h2>
    <div class="w-48 h-20 overflow-hidden border border-gray-400 p-2">
      This text is very long and will be cut off because of overflow-hidden. You cannot see the extra part.
    </div>
  </section>

  <section class="mb-6">
    <h2 class="font-bold mb-2">Overflow Auto</h2>
    <div class="w-48 h-20 overflow-auto border border-gray-400 p-2">
      This text is very long and will show scrollbars if needed. You can scroll to see all the text.
    </div>
  </section>

  <section class="mb-6">
    <h2 class="font-bold mb-2">Overflow Scroll</h2>
    <div class="w-48 h-20 overflow-scroll border border-gray-400 p-2">
      This text is very long and always shows scrollbars, even if not needed.
    </div>
  </section>

  <section>
    <h2 class="font-bold mb-2">Overflow X Auto, Overflow Y Hidden</h2>
    <div class="w-48 h-20 overflow-x-auto overflow-y-hidden border border-gray-400 p-2 whitespace-nowrap">
      This text is very long horizontally but clipped vertically. You can scroll left and right.
    </div>
  </section>
</body>
</html>
OutputSuccess
Important Notes

Use overflow-hidden to keep your layout clean by hiding extra content.

Scrollbars can improve user experience by letting users see hidden content without breaking layout.

Combine overflow-x-* and overflow-y-* classes to control horizontal and vertical overflow separately.

Summary

Overflow handling controls how extra content inside a box is shown or hidden.

Tailwind CSS provides easy classes like overflow-hidden, overflow-auto, and overflow-scroll.

Use these classes to keep your page tidy and user-friendly on all screen sizes.