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
Top comments (35)
Great share, Derick. This really helped me 🫡
BTW, if you're using TailwindCSS v3.0 or higher, you should remove:
else you'll get this warning in terminal:
I've already updated the code based on your suggestion, Nice Catch
Thanks for sharing.
Btw
scrollbar-width: none;
didn't work for me.But using
scrollbar-width: 0;
worked.you win chatgpt4 for this problem
Thank you so much for your kind words!
thanks this help me alot
Your are welcome
Amazing Derick. You solved my problem.
Combine the author's above, global scrollbar was hidden 😁
Nice one 💯
Nice👏🎉
Thank you
Great! Thank you.
thank you!
I'm glad it helped
How should I make scrollbar visible in desktop and hidden in mobile?
I don't know but try this and let me know if it works:
in your
global.css
add this code:Now, use the scrollbar class in combination with the
lg
(large screen) prefix from Tailwind to make the scrollbar visible only on desktop:Some comments have been hidden by the post's author - find out more