Tailwind Overflow
Use these shorthand utilities for quickly configuring how content overflows an element. Learn how to easily wrap text.
Default example
Adjust the overflow property on the fly with four default values and classes. These classes are not responsive by default.Below are some example of overflow in Tailwind CSS.
<div class="w-full relative h-auto rounded-xl grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8">
<div class="overflow-auto text-base font-normal text-gray-900 w-full h-28 rounded border border-gray-300 p-3"> This is an example of using <span class="text-indigo-600 font-medium">.overflow-auto</span> on an element with set width and height dimensions. By design, this content will vertically scroll. </div>
<div class="overflow-hidden text-base font-normal text-gray-900 w-full h-28 rounded border border-gray-300 p-3"> This is an example of using <span class="text-indigo-600 font-medium">.overflow-hidden</span> on an element with set width and height dimensions. </div>
<div class="overflow-visible text-base font-normal text-gray-900 w-full h-28 rounded border border-gray-300 p-3"> This is an example of using <span class="text-indigo-600 font-medium">.overflow-visible</span> on an element with set width and height dimensions. </div>
<div class="overflow-scroll text-base font-normal text-gray-900 w-full h-28 rounded border border-gray-300 p-3"> This is an example of using <span class="text-indigo-600 font-medium">.overflow-scroll</span> on an element with set width and height dimensions. </div>
</div>Scrolling if needed
Use .overflow-auto to add scrollbars to an element in the event that its content overflows the bounds of that element. Unlike .overflow-scroll, which always shows scrollbars, this utility will only show them if scrolling is necessary.
<div class="w-full max-w-sm mx-auto h-56 text-justify overflow-auto"> The city pulses with energy as a vibrant tapestry of life unfolds before our eyes. Skyscrapers stretch towards the heavens, their glass facades reflecting the dazzling sunlight. Streets teem with a kaleidoscope of people, each with their own story and purpose. Amidst the urban symphony, the scent of freshly brewed coffee mingles with the aroma of international cuisines, enticing passersby to savor culinary delights. Neon lights illuminate the night, casting a vibrant glow on bustling sidewalks and lively cafes. Wandering through the city's heart, we discover hidden gems tucked away in narrow alleyways—a charming bookstore, a lively street art mural, or a tranquil park providing respite from the urban hustle. The rhythm of life here is palpable, echoing through the laughter, the honking of taxis, and the melodies drifting from street performers. </div>1000+ Tailwind Blocks
Access over 1,000 ready-made Tailwind blocks with modern designs to accelerate your design process.
Explore More
Scrolling always
Use .overflow-scroll to add scrollbars to an element. Unlike .overflow-auto, which only shows scrollbars if they are necessary, this utility always shows them.
<div class="w-full max-w-sm mx-auto h-56 text-justify overflow-scroll"> The city pulses with energy as a vibrant tapestry of life unfolds before our eyes. Skyscrapers stretch towards the heavens, their glass facades reflecting the dazzling sunlight. Streets teem with a kaleidoscope of people, each with their own story and purpose. Amidst the urban symphony, the scent of freshly brewed coffee mingles with the aroma of international cuisines, enticing passersby to savor culinary delights. Neon lights illuminate the night, casting a vibrant glow on bustling sidewalks and lively cafes. Wandering through the city's heart, we discover hidden gems tucked away in narrow alleyways—a charming bookstore, a lively street art mural, or a tranquil park providing respite from the urban hustle. The rhythm of life here is palpable, echoing through the laughter, the honking of taxis, and the melodies drifting from street performers. </div>Scrolling horizontally always
Use .overflow-x-scroll to allow horizontal overflow scrolling and always show scrollbars unless always-visible scrollbars are disabled by the operating system.
Urban rhythm pulses, vibrant streets hum, a symphony of diversity embracing endless possibilities.
<div class="w-full max-w-xs mx-auto text-justify overflow-x-scroll">
<p class="whitespace-nowrap text-base font-medium text-gray-900 py-3"> Urban rhythm pulses, vibrant streets hum, a symphony of diversity embracing endless possibilities. </p>
</div>Scrolling vertically always
Use .overflow-y-scroll to allow vertical scrolling and always show scrollbars unless always-visible scrollbars are disabled by the operating system.
The city pulses with energy as a vibrant tapestry of life unfolds before our eyes. Skyscrapers stretch towards the heavens, their glass facades reflecting the dazzling sunlight. Streets teem with a kaleidoscope of people, each with their own story and purpose. Amidst the urban symphony, the scent of freshly brewed coffee mingles with the aroma of international cuisines.
<div class="w-full max-w-xs mx-auto text-justify overflow-y-scroll h-80">
<p class="text-base font-medium text-gray-900 py-3"> The city pulses with energy as a vibrant tapestry of life unfolds before our eyes. Skyscrapers stretch towards the heavens, their glass facades reflecting the dazzling sunlight. Streets teem with a kaleidoscope of people, each with their own story and purpose. Amidst the urban symphony, the scent of freshly brewed coffee mingles with the aroma of international cuisines. </p>
</div>
1000+ Tailwind Blocks
Access over 1,000 ready-made Tailwind blocks with modern designs to accelerate your design process.
Explore More