Tailwind CSS Overflow

Tailwind CSS provides overflow-* utilities to control how content behaves when it exceeds an element's size. These utilities are alternatives to the CSS overflow property. Tailwind CSS also provides overflow-x-* and overflow-y-* utilities to control overflow along the horizontal and vertical axes.

Tailwind CSS Overflow Classes

Class	CSS Property	Description
`overflow-auto`	`overflow: auto;`	Adds scrollbars when the content overflows the container.
`overflow-hidden`	`overflow: hidden;`	Clips overflowing content.
`overflow-clip`	`overflow: clip;`	Clips overflowing content without providing scrolling.
`overflow-visible`	`overflow: visible;`	Allows overflowing content to remain visible.
`overflow-scroll`	`overflow: scroll;`	Adds scrolling mechanisms in both directions.
`overflow-x-auto`	`overflow-x: auto;`	Enables horizontal scrolling when needed.
`overflow-y-auto`	`overflow-y: auto;`	Enables vertical scrolling when needed.
`overflow-x-hidden`	`overflow-x: hidden;`	Clips horizontal overflow.
`overflow-y-hidden`	`overflow-y: hidden;`	Clips vertical overflow.
`overflow-x-clip`	`overflow-x: clip;`	Clips horizontal overflow without scrolling.
`overflow-y-clip`	`overflow-y: clip;`	Clips vertical overflow without scrolling.
`overflow-x-visible`	`overflow-x: visible;`	Allows horizontal overflow to remain visible.
`overflow-y-visible`	`overflow-y: visible;`	Allows vertical overflow to remain visible.
`overflow-x-scroll`	`overflow-x: scroll;`	Enables horizontal scrolling and always provides a scrolling mechanism.
`overflow-y-scroll`	`overflow-y: scroll;`	Enables vertical scrolling and always provides a scrolling mechanism.

1. overflow-auto Class

The overflow-auto utility adds scrollbars when the content overflows the boundaries of its container. Unlike overflow-scroll, scrollbars are only needed when scrolling is necessary.

Syntax:

<element class="overflow-auto">...</element>

Example:

HTML

<!--Driver Code Starts-->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<title>Tailwind CSS Overflow</title>
</head>
<!--Driver Code Ends-->

<body class="p-8">
<h1 class="mb-4 text-center text-4xl font-bold text-green-600"> GeeksforGeeks </h1>
<div class="mx-auto h-32 max-w-xl overflow-auto bg-green-200 p-4"> Tailwind CSS provides utility classes for controlling how overflowing content is handled. When the content becomes larger than the container, overflow-auto allows the user to scroll through the content when necessary. This is useful for long text, tables, lists, and other content that may not fit inside a fixed-size container. </div>
</body>

<!--Driver Code Starts-->
</html>
<!--Driver Code Ends-->

2. overflow-hidden Class

The overflow is clipped and the rest of the content is invisible. This class is used to clip any content within an element that overflows the bounds of that element.

Syntax:

<element class="overflow-hidden">...</element>

Example:

HTML

<!--Driver Code Starts-->
<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

    <title>Tailwind CSS Overflow Hidden</title>
</head>

<!--Driver Code Ends-->

<body class="p-8">

    <h1 class="mb-4 text-center text-4xl font-bold text-green-600">
        GeeksforGeeks
    </h1>

    <p class="mb-4 text-center font-semibold">
        Tailwind CSS Overflow Hidden
    </p>

    <div class="mx-auto h-24 max-w-xl overflow-hidden bg-green-200 p-4">
        This is a long piece of content that extends beyond the
        fixed height of the container. The overflow-hidden utility
        clips the content that extends beyond the element's bounds.
    </div>

</body>

<!--Driver Code Starts-->

</html>
<!--Driver Code Ends-->

3. overflow-visible Class

The content is not clipped and visible outside the element box. This class used to prevent content within an element from being clipped.

Syntax:

<element class="overflow-visible">...</element>

Example:

HTML

<!--Driver Code Starts-->
<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

    <title>Tailwind CSS Overflow Visible</title>
</head>

<!--Driver Code Ends-->

<body class="p-8">

    <h1 class="mb-4 text-center text-4xl font-bold text-green-600">
        GeeksforGeeks
    </h1>

    <p class="mb-4 text-center font-semibold">
        Tailwind CSS Overflow Visible
    </p>

    <div class="mx-auto h-24 max-w-xl overflow-visible bg-green-200 p-4">
        This content is allowed to extend beyond the boundaries
        of the container because overflow-visible does not clip
        overflowing content. This content is allowed to extend beyond the boundaries
        of the container because overflow-visible does not clip
        overflowing content  This content is allowed to extend beyond the boundaries
        of the container because overflow-visible does not clip
        overflowing content  This content is allowed to extend beyond the boundaries
        of the container because overflow-visible does not clip
        overflowing content.
    </div>

</body>

<!--Driver Code Starts-->

</html>
<!--Driver Code Ends-->

4. overflow-clip Class

The overflow-clip utility clips overflowing content without providing a scrolling mechanism.

Syntax:

<element class="overflow-clip">...</element>

Example:

HTML

<!--Driver Code Starts-->
<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

    <title>Tailwind CSS Overflow Clip</title>
</head>

<!--Driver Code Ends-->

<body class="p-8">

    <h1 class="mb-4 text-center text-4xl font-bold text-green-600">
        GeeksforGeeks
    </h1>

    <p class="mb-4 text-center font-semibold">
        Tailwind CSS Overflow Clip
    </p>

    <div class="mx-auto h-24 max-w-xl overflow-clip bg-green-200 p-4">
        This content extends beyond the fixed-height container.
        The overflow-clip utility clips the overflowing content
        without providing a scrolling mechanism.
    </div>

</body>

<!--Driver Code Starts-->

</html>
<!--Driver Code Ends-->

5. overflow-x-clip Class

The overflow-x-clip utility clips content that overflows along the horizontal axis without providing a horizontal scrolling mechanism.

Syntax:

<element class="overflow-x-clip">...</element>

Example:

HTML

<!--Driver Code Starts-->
<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

    <title>Tailwind CSS Overflow X Clip</title>
</head>

<!--Driver Code Ends-->

<body class="p-8">

    <h1 class="mb-4 text-center text-4xl font-bold text-green-600">
        GeeksforGeeks
    </h1>

    <p class="mb-4 text-center font-semibold">
        Tailwind CSS Overflow X Clip
    </p>

    <div class="mx-auto max-w-xl overflow-x-clip bg-green-200 p-4">
        <div class="w-[800px] whitespace-nowrap">
            This content extends beyond the horizontal boundaries
            of the container and is clipped.
        </div>
    </div>

</body>

<!--Driver Code Starts-->

</html>
<!--Driver Code Ends-->

6. overflow-y-clip Class

The overflow-y-clip utility clips content that overflows along the vertical axis without providing a vertical scrolling mechanism.

Syntax:

<element class="overflow-y-clip">...</element>

Example:

HTML

<!--Driver Code Starts-->
<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

    <title>Tailwind CSS Overflow Y Clip</title>
</head>

<!--Driver Code Ends-->

<body class="p-8">

    <h1 class="mb-4 text-center text-4xl font-bold text-green-600">
        GeeksforGeeks
    </h1>

    <p class="mb-4 text-center font-semibold">
        Tailwind CSS Overflow Y Clip
    </p>

    <div class="mx-auto h-24 max-w-xl overflow-y-clip bg-green-200 p-4">
        This content extends beyond the vertical boundaries
        of the container and is clipped.
    </div>

</body>

<!--Driver Code Starts-->

</html>
<!--Driver Code Ends-->

7. overflow-scroll Class

The overflow-scroll utility provides a scrolling mechanism in both directions. Unlike overflow-auto, it does not limit scrolling to cases where the content overflows the container.

Syntax:

<element class="overflow-scroll">...</element>

Example:

HTML

<!--Driver Code Starts-->
<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

    <title>Tailwind CSS Overflow Scroll</title>
</head>

<!--Driver Code Ends-->

<body class="p-8">

    <h1 class="mb-4 text-center text-4xl font-bold text-green-600">
        GeeksforGeeks
    </h1>

    <p class="mb-4 text-center font-semibold">
        Tailwind CSS Overflow Scroll
    </p>

    <div class="mx-auto h-40 max-w-xl overflow-scroll bg-green-200 p-4">
        <div class="w-[800px]">
            This content is intentionally wider than the container.
            Because overflow-scroll is applied, the container
            provides a scrolling mechanism for overflowing content.
        </div>
    </div>

</body>

<!--Driver Code Starts-->

</html>
<!--Driver Code Ends-->

8. Overflow-x Class

The overflow-x-* utilities control how content that overflows along the horizontal axis is handled. The overflow-x-auto utility provides horizontal scrolling when content overflows the element's horizontal boundaries.

Syntax:

<element class="overflow-x-auto">...</element>

Example:

HTML

<!--Driver Code Starts-->
<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

    <title>Tailwind CSS Overflow X Auto</title>
</head>

<!--Driver Code Ends-->

<body class="p-8">

    <h1 class="mb-4 text-center text-4xl font-bold text-green-600">
        GeeksforGeeks
    </h1>

    <p class="mb-4 text-center font-semibold">
        Tailwind CSS Overflow X Auto
    </p>

    <div class="mx-auto max-w-xl overflow-x-auto bg-green-200 p-4">
        <div class="w-[800px] whitespace-nowrap">
            This content is wider than the container and can be
            scrolled horizontally.
        </div>
    </div>

</body>

<!--Driver Code Starts-->

</html>
<!--Driver Code Ends-->

9. overflow-x-hidden Class

It is used to clip the content and no scrolling mechanism is provided on the x-axis.

Syntax:

<element class="overflow-x-hidden">...</element>

Example:

HTML

<!--Driver Code Starts-->
<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

    <title>Tailwind CSS Overflow X Hidden</title>
</head>

<!--Driver Code Ends-->

<body class="p-8">

    <h1 class="mb-4 text-center text-4xl font-bold text-green-600">
        GeeksforGeeks
    </h1>

    <p class="mb-4 text-center font-semibold">
        Tailwind CSS Overflow X Hidden
    </p>

    <div class="mx-auto max-w-xl overflow-x-hidden bg-green-200 p-4">
        <div class="w-[800px] whitespace-nowrap">
            This content extends beyond the horizontal boundaries
            of the container and is clipped.
        </div>
    </div>

</body>

<!--Driver Code Starts-->

</html>
<!--Driver Code Ends-->

10. overflow-x-visible Class

This class does not clip the content. The content may be rendered outside the left and right edges.

Syntax:

<element class="overflow-x-visible">...</element>

Example:

HTML

<!--Driver Code Starts-->
<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

    <title>Tailwind CSS Overflow X Visible</title>
</head>

<!--Driver Code Ends-->

<body class="p-8">

    <h1 class="mb-4 text-center text-4xl font-bold text-green-600">
        GeeksforGeeks
    </h1>

    <p class="mb-4 text-center font-semibold">
        Tailwind CSS Overflow X Visible
    </p>

    <div class="mx-auto max-w-xl overflow-x-visible bg-green-200 p-4">
        <div class="w-[800px] whitespace-nowrap">
            This content can extend beyond the horizontal boundaries
            of the container.
        </div>
    </div>

</body>

<!--Driver Code Starts-->

</html>
<!--Driver Code Ends-->

11. overflow-x-scroll Class

The overflow-x-scroll utility provides a horizontal scrolling mechanism for content that overflows along the horizontal axis.

Syntax:

<element class="overflow-x-scroll">...</element>

Example:

HTML

<!--Driver Code Starts-->
<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

    <title>Tailwind CSS Overflow X Scroll</title>
</head>

<!--Driver Code Ends-->

<body class="p-8">

    <h1 class="mb-4 text-center text-4xl font-bold text-green-600">
        GeeksforGeeks
    </h1>

    <p class="mb-4 text-center font-semibold">
        Tailwind CSS Overflow X Scroll
    </p>

    <div class="mx-auto max-w-xl overflow-x-scroll bg-green-200 p-4">
        <div class="w-[800px] whitespace-nowrap">
            This content is wider than the container, so it can be
            scrolled horizontally.
        </div>
    </div>

</body>

<!--Driver Code Starts-->

</html>
<!--Driver Code Ends-->

12. Overflow-y Class

The overflow-y-* utilities control how content that overflows along the vertical axis is handled. The overflow-y-auto utility provides vertical scrolling when content overflows the element's vertical boundaries.

Syntax:

<element class="overflow-y-auto">...</element>

Example:

HTML

<!--Driver Code Starts-->
<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

    <title>Tailwind CSS Overflow Y Scroll</title>
</head>

<!--Driver Code Ends-->

<body class="p-8">

    <h1 class="mb-4 text-center text-4xl font-bold text-green-600">
        GeeksforGeeks
    </h1>

    <p class="mb-4 text-center font-semibold">
        Tailwind CSS Overflow Y Scroll
    </p>

    <div class="mx-auto h-32 max-w-xl overflow-y-scroll bg-green-200 p-4">
        This is a long piece of content that extends vertically
        beyond the container. The overflow-y-scroll utility
        provides a vertical scrolling mechanism.
        More content is included here to demonstrate scrolling.
    </div>

</body>

<!--Driver Code Starts-->

</html>
<!--Driver Code Ends-->

13. overflow-y-hidden Class

The overflow-y-visible utility allows content that extends beyond the top and bottom boundaries of an element to remain visible.

Syntax:

<element class="overflow-y-hidden">...</element>

Example:

HTML

<!--Driver Code Starts-->
<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

    <title>Tailwind CSS Overflow Y Hidden</title>
</head>

<!--Driver Code Ends-->

<body class="p-8">

    <h1 class="mb-4 text-center text-4xl font-bold text-green-600">
        GeeksforGeeks
    </h1>

    <p class="mb-4 text-center font-semibold">
        Tailwind CSS Overflow Y Hidden
    </p>

    <div class="mx-auto h-24 max-w-xl overflow-y-hidden bg-green-200 p-4">
        This content extends vertically beyond the container.
        The overflow-y-hidden utility clips the content that
        extends beyond the vertical boundaries.
    </div>

</body>

<!--Driver Code Starts-->

</html>
<!--Driver Code Ends-->

14. overflow-y-visible Class

This class does not clip the content. The content may be rendered outside the left and right edges.

Syntax:

<element class="overflow-y-visible">...</element>

Example:

HTML

<!--Driver Code Starts-->
<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

    <title>Tailwind CSS Overflow Y Visible</title>
</head>

<!--Driver Code Ends-->

<body class="p-8">

    <h1 class="mb-4 text-center text-4xl font-bold text-green-600">
        GeeksforGeeks
    </h1>

    <p class="mb-4 text-center font-semibold">
        Tailwind CSS Overflow Y Visible
    </p>

    <div class="mx-auto h-24 max-w-xl overflow-y-visible bg-green-200 p-4">
        This content can extend beyond the vertical boundaries
        of the container.
    </div>

</body>

<!--Driver Code Starts-->

</html>
<!--Driver Code Ends-->

15. overflow-y-scroll Class

The overflow-y-scroll utility provides a vertical scrolling mechanism for content that overflows along the vertical axis.

Syntax:

<element class="overflow-y-scroll">...</element>

Example:

HTML

<!--Driver Code Starts-->
<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

    <title>Tailwind CSS Overflow Y Scroll</title>
</head>

<!--Driver Code Ends-->

<body class="p-8">

    <h1 class="mb-4 text-center text-4xl font-bold text-green-600">
        GeeksforGeeks
    </h1>

    <p class="mb-4 text-center font-semibold">
        Tailwind CSS Overflow Y Scroll
    </p>

    <div class="mx-auto h-32 max-w-xl overflow-y-scroll bg-green-200 p-4">
        This is a long piece of content that extends vertically
        beyond the container. The overflow-y-scroll utility
        provides a vertical scrolling mechanism.
        More content is included here to demonstrate scrolling.
    </div>

</body>

<!--Driver Code Starts-->

</html>
<!--Driver Code Ends-->