Tailwind CSS Overflow
The overflow class acknowledges more than one value in Tailwind CSS. It is an option in contrast to the CSS Overflow property. This overflow is for controlling how element content is taken care of, which is excessively enormous for the container. It advises whether to clip content or to add scroll bars.
There is an independent property in CSS for CSS Overflow-x and CSS Overflow-y.
Overflow classes
The overflow classes are classified as:
- overflow-auto
- overflow-hidden
- overflow-visible
- overflow-scroll
- overflow-x-auto
- overflow-y-auto
- overflow-x-hidden
- overflow-y-hidden
- overflow-x-visible
- overflow-y-visible
- overflow-x-scroll
- overflow-y-scroll
overflow-auto
It consequently adds a scrollbar at whatever point it is required. This class adds scrollbars to an element on the occasion that its content overflows the limit (boundary) of that element.
Syntax:
<element class="overflow-auto">...</element>
Example:
An example for the overflow-auto class is as follows:
<!DOCTYPE html> <head> <link href= "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="text-center"> <center> <h1 class="text-red-600 text-5xl font-bold"> Tutorial and Example </h1> <b> Overflow Class - Tailwind CSS</b> <div class="overflow-auto bg-red-200 p-4 mx-16 h-24 text-justify"> How frequently were you baffled while paying special attention to a decent assortment of programming/calculation/inquiries questions? What did you expect and what did you get? This entrance has been made to give elegantly composed, very much idea and well-clarified answers for chosen questions. An IIT Roorkee former student and organizer of Javatpoint. He loves to settle programming Issues in most proficient ways. Aside from Javatpoint, has worked with DE Shaw , what's more, Co. as a product engineer and JIIT Noida as an associate teacher. It is a great stage to get the hang of programming. It is an instructive site. Get ready for the Enrolments drive of item-based organizations like Microsoft, Amazon, Adobe, and so on with a free web-based position arrangement course. </div> </center> </body> </html>
Output:
overflow-hidden
The overflow is clipped and the remainder of the content is undetectable (invisible). This class is utilized to clip any content inside an element that overflows the limits (bounds) of that element.
Syntax:
<element class="overflow-hidden">...</element>
Example:
Example for overflow-hidden class is as follows:
<!DOCTYPE html> <head> <link href= "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="text-center"> <center> <h1 class="text-red-600 text-5xl font-bold"> Tutorial and Example </h1> <b> Overflow Class - Tailwind CSS</b> <div class="overflow-hidden bg-red-200 p-4 mx-16 h-24 text-justify"> How frequently were you baffled while paying special attention to a decent assortment of programming/calculation/inquiries questions? What did you expect and what did you get? This entrance has been made to give elegantly composed, very much idea and well-clarified answers for chosen questions. An IIT Roorkee former student and organizer of Javatpoint. He loves to settle programming Issues in most proficient ways. Aside from Javatpoint, has worked with DE Shaw , what's more, Co. as a product engineer and JIIT Noida as an associate teacher. It is a great stage to get the hang of programming. It is an instructive site. Get ready for the Enrolments drive of item-based organizations like Microsoft, Amazon, Adobe, and so on with a free web-based position arrangement course . </div> </center> </body> </html>
Output:
overflow-visible
The content isn't clipped and noticeable external the element box. This class is used to keep content inside an element from being clipped.
Syntax:
<element class="overflow-visible">...</element>
Example:
An example for the overflow-visible class is as follows:
<!DOCTYPE html> <head> <link href= "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="text-center"> <center> <h1 class="text-red-600 text-5xl font-bold"> Tutorial and Example </h1> <b> Overflow Class - Tailwind CSS</b> <div class="overflow-visible bg-red-200 p-4 mx-16 h-24 text-justify"> How frequently were you baffled while paying special attention to a decent assortment of programming/calculation/inquiries questions? What did you expect and what did you get? This entrance has been made to give elegantly composed, very much idea and well-clarified answers for chosen questions. An IIT Roorkee former student and organizer of Javatpoint. He loves to settle programming Issues in most proficient ways. Aside from Javatpoint, has worked with DE Shaw , what's more, Co. as a product engineer and JIIT Noida as an associate teacher. It is a great stage to get the hang of programming. It is an instructive site. Get ready for the Enrolments drive of item-based organizations like Microsoft, Amazon, Adobe, and so on with a free web-based position arrangement course . </div> </center> </body> </html>
Output:
overflow-scroll
The overflow is clipped however a scrollbar is added to see the remainder of the content. The scrollbar can be horizontal or vertical. This class is utilized when you want to show scrollbars, this utility might be shown assuming that scrolling over is vital.
Syntax:
<element class="overflow-scroll">...</element>
Example:
Example for overflow-scroll class is as follows:
<!DOCTYPE html> <head> <link href= "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="text-center"> <center> <h1 class="text-red-600 text-5xl font-bold"> Tutorial and Example </h1> <b> Overflow Class - Tailwind CSS</b> <div class="overflow-scroll bg-red-200 p-4 mx-16 h-24 text-justify"> How frequently were you baffled while paying special attention to a decent assortment of programming/ calculation/inquiries questions? What did you expect and what did you get? </div> </center> </body> </html>
Output:
overflow-x
This class determines whether to add a scrollbar, clip the content, or show overflow content of a block-level element when it overflows at the left and right edges.
overflow-x-auto
It gives a scrolling over a component to overflowing boxes.
Syntax:
<element class="overflow-x-auto">...</element>
Example:
An example for the overflow-auto class is as follows:
<!DOCTYPE html> <head> <link href= "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="text-center"> <center> <h1 class="text-red-600 text-5xl font-bold"> Tutorial and Example </h1> <b> Overflow-x Class - Tailwind CSS</b> <div class="overflow-x-auto bg-red-200 p-4 mx-16 h-24 text-justify"> How frequently were you baffled while paying special attention to a decent assortment of programming/ calculation/inquiries questions? What did you expect and what did you get? </div> </center> </body> </html>
Output:
overflow-x-hidden
It is utilized to clip the content and no scrolling over a system is given on the x-axis.
Syntax:
<element class="overflow-x-hidden">...</element>
Example:
Example for overflow-x-hidden class is as follows:
<!DOCTYPE html> <head> <link href= "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="text-center"> <center> <h1 class="text-red-600 text-5xl font-bold"> Tutorial and Example </h1> <b>Overflow-x Class - Tailwind CSS </b> <div class="overflow-x-hidden bg-red-200 p-4 mx-16 h-12 text-justify"> How frequently were you baffled while paying special attention to a decent assortment of programming/ calculation/inquiries questions? What did you expect and what did you get? </div> </center> </body> </html>
Output:
overflow-x-visible
This class doesn't clip the content. The content might be delivered externally on the left and right edges.
Syntax:
<element class="overflow-x-visible">...</element>
Example:
Example for overflow-x-visible class is as follows:
<!DOCTYPE html> <head> <link href= "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="text-center"> <center> <h1 class="text-red-600 text-5xl font-bold"> Tutorial and Example </h1> <b>Overflow-x Class - Tailwind CSS </b> <div class="overflow-x-visible bg-red-200 p-4 mx-16 h-24 text-justify"> How frequently were you baffled while paying special attention to a decent assortment of programming/ calculation/inquiries questions? What did you expect and what did you get? </div> </center> </body> </html>
Output:
overflow-x-scroll
It is utilized to clip the content and give a scrolling over system (a mechanism).
Syntax:
<element class="overflow-x-scroll">...</element>
Example:
Example for overflow-x-scroll class is as follows:
<!DOCTYPE html> <head> <link href= "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="text-center"> <center> <h1 class="text-red-600 text-5xl font-bold"> Tutorial and Example </h1> <b>Overflow-x Class - Tailwind CSS </b> <div class="overflow-x-scroll bg-red-200 p-4 mx-16 h-24 text-justify"> How frequently were you baffled while paying special attention to a decent assortment of programming/ calculation/inquiries questions? What did you expect and what did you get? </div> </center> </body> </html>
Output:
overflow-y
This class indicates whether to add a scrollbar, clip the content, or show overflow content of a block-level element when it overflows at the top and base (bottom) edges.
overflow-y-auto: It gives a scrolling over the system to overflowing boxes.
Syntax:
<element class="overflow-y-auto">...</element>
Example:
Example for overflow-y-auto class is as follows:
<!DOCTYPE html> <head> <link href= "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="text-center"> <center> <h1 class="text-red-600 text-5xl font-bold"> Tutorial and Example </h1> <b>Overflow-y Class - Tailwind CSS </b> <div class="overflow-y-auto bg-red-200 p-4 mx-16 h-24 text-justify"> How frequently were you baffled while paying special attention to a decent assortment of programming/ calculation/inquiries questions? What did you expect and what did you get? </div> </center> </body> </html>
Output:
overflow-y-hidden
It is utilized to clip the content and no scrolling over the system is given on the y-axis.
Syntax:
<element class="overflow-y-hidden">...</element>
Example:
Example for overflow-y-hidden class is as follows:
<!DOCTYPE html> <head> <link href= "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="text-center"> <center> <h1 class="text-red-600 text-5xl font-bold"> Tutorial and Example </h1> <b>Overflow-y Class - Tailwind CSS </b> <div class="overflow-y-hidden bg-red-200 p-4 mx-16 h-24 text-justify"> How frequently were you baffled while paying special attention to a decent assortment of programming/ calculation/inquiries questions? What did you expect and what did you get? </div> </center> </body> </html>
Output:
overflow-y-visible
This class doesn't clip the content. The content might be delivered externally on the left and right edges.
Syntax:
<element class="overflow-y-visible">...</element>
Example:
Example for overflow-y-visible class is as follows:
<!DOCTYPE html> <head> <link href= "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="text-center"> <center> <h1 class="text-red-600 text-5xl font-bold"> Tutorial and Example </h1> <b>Overflow-y Class - Tailwind CSS </b> <div class="overflow-y-visible bg-red-200 p-4 mx-16 h-24 text-justify"> How frequently were you baffled while paying special attention to a decent assortment of programming/ calculation/inquiries questions? What did you expect and what did you get? </div> </center> </body> </html>
Output:
overflow-y-scroll
It is utilized to clip the content and gives a scrolling mechanism.
Syntax:
<element class="overflow-y-scroll">...</element>
Example:
Example for overflow-y-scroll class is as follows:
<!DOCTYPE html> <head> <link href= "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="text-center"> <center> <h1 class="text-red-600 text-5xl font-bold"> Tutorial and Example </h1> <b>Overflow-y Class - Tailwind CSS </b> <div class="overflow-y-scroll bg-red-200 p-4 mx-16 h-24 text-justify"> How frequently were you baffled while paying special attention to a decent assortment of programming/ calculation/inquiries questions? What did you expect and what did you get? </div> </center> </body> </html>
Output:
