- Published on
How to Hide Scrollbar, but while still being able to scroll in Tailwind CSS?
![How to Hide Scrollbar, but while still being able to scroll in Tailwind CSS?](https://user-images.githubusercontent.com/33494971/269602373-9aa20fcb-72ca-49ca-902c-e5866a74bf0e.png)
How to Hide Scrollbar, but while still being able to scroll in Tailwind CSS?
Hide Scrollbar in Tailwind CSS
The key to hiding scrollbars lies in manipulating the ::-webkit-scrollbar
property.
Scrollbars, while essential for navigating content, can sometimes disrupt the visual harmony of a web page.
Whether you are looking to achieve a sleek and modern appearance or simply want to declutter your design, hiding scrollbars can significantly contribute to a seamless user experience. With Tailwind CSS, achieving this effect becomes an effortless endeavor.
Here's how you can do it effectively:
<div class="hide-scrollbar">content</div>
Css Code to Hide Scrollbar
/* Hide scrollbar for Chrome, Safari and Opera */
.hide-scrollbar::-webkit-scrollbar {
display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
.hide-scrollbar {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
Equivalent Tailwind Css Code to Hide Scrollbar
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer utilities {
@variants responsive {
/* Hide scrollbar for Chrome, Safari, and Opera */
.hide-scrollbar::-webkit-scrollbar {
display: none;
}
/* Hide scrollbar for IE, Edge, and Firefox */
.hide-scrollbar {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
}
}