Tailwind CSS - Bonus
Tailwind CSS - Using with Preprocessors
Tailwind CSS - Optimizing for Production

Tailwind CSS - Overflow

Quiz

Tailwind CSS Overflow is a utility class that provides an effective way of handling the content that overflows the boundaries of its container. It provides a way to clip the content or add a scroll bar.

Tailwind CSS Overflow classes

The following is the list of Tailwind CSS Overflow classes that provides an effective way of handling content that is too large.

class	CSS Properties
overflow-auto	overflow: auto;
overflow-hidden	overflow: hidden;
overflow-clip	overflow: clip;
overflow-visible	overflow: visible;
overflow-scroll	overflow: scroll;
overflow-x-auto	overflow-x: auto;
overflow-y-auto	overflow-y: auto;
overflow-x-hidden	overflow-x: hidden;
overflow-y-hidden	overflow-y: hidden;
overflow-x-clip	overflow-x: clip;
overflow-y-clip	overflow-y: clip;
overflow-x-visible	overflow-x: visible;
overflow-y-visible	overflow-y: visible;
overflow-x-scroll	overflow-x: scroll;
overflow-y-scroll	overflow-y: scroll;

Functionality of Tailwind CSS Overflow classes

overflow-auto: This class replaces the CSS overflow: auto; property. This class adds a scrollbar when content overflows the container.
overflow-hidden: This class replaces the CSS overflow: hidden; property. This class hides the content that overflows the container.
overflow-clip: This class replaces the CSS overflow: clip; property. This class clips the content that overflows the container and will not be visible.
overflow-visible: This class replaces the CSS overflow: visible; property. This default value doesnt clip the overflow content and keeps it visible.
overflow-scroll: This class replaces the CSS overflow: scroll; property. This class adds a scrollbar whether the content overflows or not.
overflow-x-auto: This class replaces the CSS overflow-x: auto; property. This class adds a horizontal scrollbar if the content overflows horizontally.
overflow-y-auto: This class replaces the CSS overflow-y: auto; property. This class adds a vertical scrollbar if the content overflows vertically.
overflow-x-hidden: This class replaces the CSS overflow-x: hidden; property. This class hides the horizontally overflow content.
overflow-y-hidden: This class replaces the CSS overflow-y: hidden; property. This class hides the vertical overflow content.
overflow-x-clip: This class replaces the CSS overflow-x: clip; property. This class clips the horizontal overflow content.
overflow-y-clip: This class replaces the CSS overflow-y: clip; property. This class clips the vertical overflow content.
overflow-x-visible: This class replaces the CSS overflow-x: visible; property. This class ensures that the horizontal content remains visible.
overflow-y-visible: This class replaces the CSS overflow-y: visible; property. This class ensures that the vertical content remains visible.
overflow-x-scroll: This class replaces the CSS overflow-x: scroll; property. This class adds a horizontal scrollbar.
overflow-y-scroll: This class replaces the CSS overflow-y: scroll; property. This class adds a vertical scrollbar.

Tailwind CSS Overflow class Examples

The following examples will illustrate the Tailwind CSS Overflow class utility.

Tailwind CSS Overflow Auto class

The below example illustrates the use of Tailwind CSS Overflow Auto class.

Example





    



    
        Tailwind CSS Overflow Auto class
    
    
        
        
            Tailwind CSS Overflow is a utility class that provides
            an effective way of handling the content that overflows
            the boundaries of its container. It provides a way to 
            clip the content or add a scroll bar.

Tailwind CSS Overflow Hidden class

The below example illustrates the use of Tailwind CSS Overflow Hidden class.

Example




    



    
        Tailwind CSS Overflow Hidden class
    
    
        
        
            Tailwind CSS Overflow is a utility class that provides
            an effective way of handling the content that overflows
            the boundaries of its container. It provides a way to 
            clip the content or add a scroll bar.

Tailwind CSS Overflow Clip class

The below example illustrates the use of Tailwind CSS Overflow Clip class.

Example




    



    
        Tailwind CSS Overflow Clip class
    
    
        
        
            Tailwind CSS Overflow is a utility class that provides
            an effective way of handling the content that overflows
            the boundaries of its container. It provides a way to 
            clip the content or add a scroll bar.

Tailwind CSS Overflow Visible class

The below example illustrates the use of Tailwind CSS Overflow Visible class.

Example




    



    
        Tailwind CSS Overflow Visible class
    
    
        
        
            Tailwind CSS Overflow is a utility class that provides
            an effective way of handling the content that overflows
            the boundaries of its container. It provides a way to 
            clip the content or add a scroll bar.

Tailwind CSS Overflow Scroll class

The below example illustrates the use of Tailwind CSS Overflow Scroll class.

Example




    



    
        Tailwind CSS Overflow Scroll class
    
    
        
        
            Tailwind CSS Overflow is a utility class that provides
            an effective way of handling the content that overflows
            the boundaries of its container. It provides a way to 
            clip the content or add a scroll bar.

Tailwind CSS Overflow Axis Auto

The below example illustrates the use of Tailwind CSS Overflow-x-auto & Overflow-y-auto classes.

Example




    


    
        Tailwind CSS Overflow-x-auto class
    
    

        
            Tailwind CSS Overflow is a utility class that provides
            an effective way of handling the content that overflows
            the boundaries of its container. It provides a way to 
            clip the content or add a scroll bar.
            
    
    
        Tailwind CSS Overflow-y-auto class
    
    

        
            Tailwind CSS Overflow is a utility class that provides
            an effective way of handling the content that overflows
            the boundaries of its container. It provides a way to 
            clip the content or add a scroll bar.

Tailwind CSS Overflow Axis Hidden

The below example illustrates the use of Tailwind CSS Overflow-x-hidden & Overflow-y-hidden classes.

Example




    


    
        Tailwind CSS Overflow-x-hidden class
    
    

        
            Tailwind CSS Overflow is a utility class that provides
            an effective way of handling the content that overflows
            the boundaries of its container. It provides a way to 
            clip the content or add a scroll bar.
            
    
    
        Tailwind CSS Overflow-y-hidden class
    
    
            
                Tailwind CSS Overflow is a utility class that provides
                an effective way of handling the content that overflows
                the boundaries of its container. It provides a way to 
                clip the content or add a scroll bar.

Tailwind CSS Overflow Axis Clips

The below example illustrates the use of Tailwind CSS Overflow-x-clip & Overflow-y-clip classes.

Example




    


    
        Tailwind CSS Overflow-x-clip class
    
    

        
            Tailwind CSS Overflow is a utility class that provides
            an effective way of handling the content that overflows
            the boundaries of its container. It provides a way to 
            clip the content or add a scroll bar.
           
    
    
        Tailwind CSS Overflow-y-clip class
    
    

        
            Tailwind CSS Overflow is a utility class that provides
            an effective way of handling the content that overflows
            the boundaries of its container. It provides a way to 
            clip the content or add a scroll bar.

Tailwind CSS Overflow Axis Visibility

The below example illustrates the use of Tailwind CSS Overflow-x-visible & Overflow-y-visible classes.

Example




    


    
        Tailwind CSS Overflow-x-visible class
    
    

        
            Tailwind CSS Overflow is a utility class that provides
            an effective way of handling the content that overflows
            the boundaries of its container. It provides a way to 
            clip the content or add a scroll bar.
        
    

    
        Tailwind CSS Overflow-y-visible class
    
    

        
            Tailwind CSS Overflow is a utility class that provides
            an effective way of handling the content that overflows
            the boundaries of its container. It provides a way to 
            clip the content or add a scroll bar.

Tailwind CSS Overflow Axis Scroll

The below example illustrates the use of Tailwind CSS Overflow-x-scroll & Overflow-y-scroll classes.

Example




    


    
        Tailwind CSS Overflow-x-scroll class
    
    

        
            Tailwind CSS Overflow is a utility class that provides
            an effective way of handling the content that overflows
            the boundaries of its container. It provides a way to 
            clip the content or add a scroll bar.
        
    
    
        Tailwind CSS Overflow-y-scroll class
    
    
        
            Tailwind CSS Overflow is a utility class that provides
            an effective way of handling the content that overflows
            the boundaries of its container. It provides a way to 
            clip the content or add a scroll bar.

Print Page