How to create scrollable element in Tailwind without a scrollbar ?

Last Updated : 03 Apr, 2023

Tailwind CSS is a CSS framework that helps in building rapid custom UI. It is a highly customizable, low-level CSS framework that gives you all of the building blocks that you need. Tailwind CSS creates small utilities with a defined set of options enabling easy integration of existing classes into the HTML code.

In this article, we’ll see how to create a scrollable element in Tailwind without a scrollbar. Scrollable elements are a standard design feature on many websites and applications. They allow you to display a large amount of content in a limited space, making it easier for users to navigate and consume information. Let’s understand different approaches how to create a scrollable element in Tailwind without a scrollbar.

CSS Properties to hide the scrollbar:

overflow: -moz-scrollbars-none: This property allows you to hide the scrollbar while still allowing the element to be scrollable in a browser specific to Mozilla Firefox.
overflow: -webkit-scrollbar:none: This property allows you to hide the scrollbar while still allowing the element to be scrollable in WebKit-based browsers (such as Google Chrome and Safari, etc).
scrollbar-width: none: This property allows you to remove the scrollbar from an element in modern browsers that support them with the width as none.
scrollbar-color: transparent: This property allows you to remove the scrollbar from an element in modern browsers that support them having its color transparent.

Pseudo Element used in Tailwind:

::-webkit-scrollbar: This pseudo-element allows the users to target the scrollbar specifically for WebKit-based browsers in browsers like Safari, Chrome, etc.
scrollbar-none: It is a Tailwind CSS class that hides the scrollbar.

Approach 1: Below example demonstrate how to create a scrollable element in Tailwind without a scrollbar using ‘::-webkit-scrollbar’.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title>GeeksforGeeks</title> 
    <link href= 
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
          rel="stylesheet" /> 
    <style> 
        .no-scrollbar::-webkit-scrollbar { 
            display: none; 
        } 
    </style> 
</head> 
  
<body class="text-center"> 
    <h1 class="text-green-700 text-5xl font-bold"> 
         GeeksforGeeks 
     </h1> 
    <h3 class="text-2xl">No Scrollbar in Tailwind CSS</h3> 
    <div> 
        <div class="h-24 no-scrollbar overflow-y-auto bg-gray-200"> 
            <p class="p-4">GeeksforGeeks is a popular online learning 
                platform that provides computer science students, 
                software engineers, and other tech professionals  
                with a wide range of resources to enhance their coding 
                skills and knowledge. It offers a variety of resources, 
                including articles, coding challenges, video 
                tutorials, online courses, and interview preparation  
                materials. The platform covers a wide range of 
                topics in computer science, including algorithms,  
                data structures, programming languages, software 
                development, machine learning, and more. 
              </p> 
            <p class="p-4">GeeksforGeeks is a popular online learning 
                platform that provides computer science students, 
                software engineers, and other tech professionals  
                with a wide range of resources to enhance their coding 
                skills and knowledge. It offers a variety of resources, 
                including articles, coding challenges, video 
                tutorials, online courses, and interview preparation  
                materials. The platform covers a wide range of 
                topics in computer science, including algorithms,  
                data structures, programming languages, software 
                development, machine learning, and more. 
              </p> 
        </div> 
    </div> 
</body> 
  
</html>

Output:

Approach 2: Below example demonstrate how to create a scrollable element in Tailwind without a scrollbar using ‘overflow-scroll’ class.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title>GeeksforGeeks</title> 
    <link href= 
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
          rel="stylesheet" /> 
    <style> 
        .overflow-scroll::-webkit-scrollbar { 
            display: none; 
        } 
    </style> 
</head> 
  
<body class="text-center"> 
    <h1 class="text-green-700 text-5xl font-bold"> 
         GeeksforGeeks 
    </h1> 
    <h3 class="text-2xl">No Scrollbar in Tailwind CSS</h3> 
    <div> 
        <div class="h-24 overflow-scroll bg-green-500"> 
             <p class="p-4">GeeksforGeeks is a popular online learning 
                platform that provides computer science students, 
                software engineers, and other tech professionals  
                with a wide range of resources to enhance their coding 
                skills and knowledge. It offers a variety of resources, 
                including articles, coding challenges, video 
                tutorials, online courses, and interview preparation  
                materials. The platform covers a wide range of 
                topics in computer science, including algorithms,  
                data structures, programming languages, software 
                development, machine learning, and more. 
              </p> 
            <p class="p-4">GeeksforGeeks is a popular online learning 
                platform that provides computer science students, 
                software engineers, and other tech professionals  
                with a wide range of resources to enhance their coding 
                skills and knowledge. It offers a variety of resources, 
                including articles, coding challenges, video 
                tutorials, online courses, and interview preparation  
                materials. The platform covers a wide range of 
                topics in computer science, including algorithms,  
                data structures, programming languages, software 
                development, machine learning, and more. 
              </p> 
        </div> 
    </div> 
</body> 
  
</html>