Hi there👋,
You don't want your UI to look like this?
Here are two steps to follow in order to hide a scrollbar
in your HTML elements using TailwindCss.
Step I
Go to your global.css
file styles/global.css
and past this code:
/* global index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
/* add the code bellow */
@layer utilities {
/* Hide scrollbar for Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {
display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
.no-scrollbar {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
}
At this point we added
::-webkit-scrollbar
to target the scrollbar style inChrome
,Safari
,Edge
andOpera
.
no-scrollbar
is the class that we are going to use for hidding the scrollbar.
Step II
Now use no-scrollbar
to hide the scrollbar in your elements. Like this:
<div className="w-full h-42 overflow-y-scroll no-scrollbar">...</div>
Result
I hope you find this post useful.
Feel free to connect with me on Twitter