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’.
<!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.
<!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 >
|
Output: