DEV Community

Cover image for How to hide scrollbar on your element in TailwindCSS

How to hide scrollbar on your element in TailwindCSS

Derick Zihalirwa on June 03, 2022

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 Tail...
Collapse
 
collinsedim profile image
Collins Edim • Edited

Great share, Derick. This really helped me 🫡

BTW, if you're using TailwindCSS v3.0 or higher, you should remove:

@variants responsive {
}
Enter fullscreen mode Exit fullscreen mode

else you'll get this warning in terminal:

warn - The `@variants` directive has been deprecated in Tailwind CSS v3.0.
warn - Use `@layer utilities` or `@layer components` instead.
warn - https://tailwindcss.com/docs/upgrade-guide#replace-variants-with-layer
Enter fullscreen mode Exit fullscreen mode
Collapse
 
derick1530 profile image
Derick Zihalirwa

I've already updated the code based on your suggestion, Nice Catch

Collapse
 
iamdipankarpaul profile image
Dipankar Paul

Thanks for sharing.
Btw scrollbar-width: none; didn't work for me.
But using scrollbar-width: 0; worked.

Collapse
 
huyong007 profile image
胡永

you win chatgpt4 for this problem

Collapse
 
derick1530 profile image
Derick Zihalirwa • Edited

Thank you so much for your kind words!

Collapse
 
xbdirisxk profile image
Abdirisakhd

thanks this help me alot

Collapse
 
derick1530 profile image
Derick Zihalirwa

Your are welcome

Collapse
 
zeeshansafdar48 profile image
Zeeshan Safdar

Amazing Derick. You solved my problem.

Collapse
 
tomartisan profile image
tomartisan
@layer base {
  * {
    @apply border-border;
  }
  html,
  body {
    @apply no-scrollbar;
  }
}
Enter fullscreen mode Exit fullscreen mode

Combine the author's above, global scrollbar was hidden 😁

Collapse
 
derick1530 profile image
Derick Zihalirwa

Nice one 💯

Collapse
 
francois18 profile image
Francois18

Nice👏🎉

Collapse
 
derick1530 profile image
Derick Zihalirwa

Thank you

Collapse
 
amsalegebrehana profile image
Amsale Gebrehana

Great! Thank you.

Collapse
 
adamthedeveloper profile image
Adam - The Developer

thank you!

Collapse
 
derick1530 profile image
Derick Zihalirwa • Edited

I'm glad it helped

Collapse
 
amirkermanshahani profile image
Amir Kermanshahani

How should I make scrollbar visible in desktop and hidden in mobile?

Collapse
 
derick1530 profile image
Derick Zihalirwa • Edited

I don't know but try this and let me know if it works:
in your global.css add this code:

/* global.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

@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 */
  }
  /* Show scrollbar */
  .scrollbar::-webkit-scrollbar {
    display: block;
  }
  .scrollbar {
    -ms-overflow-style: auto;  /* IE and Edge */
    scrollbar-width: auto;  /* Firefox */
  }
}
Enter fullscreen mode Exit fullscreen mode

Now, use the scrollbar class in combination with the lg (large screen) prefix from Tailwind to make the scrollbar visible only on desktop:

<div className="w-full h-42 overflow-y-scroll no-scrollbar lg:scrollbar">...</div>

Enter fullscreen mode Exit fullscreen mode
Collapse
 
kuipid01 profile image
Stephen Busayo Adegoke

thanks boss , please how did you get this **comment **text box

Collapse
 
paras231 profile image
paras231

Thanks this helped

Collapse
 
derick1530 profile image
Derick Zihalirwa

Glad it helped

Collapse
 
ashalda profile image
Alex Shalda

Awesome!!!!

Collapse
 
visweswar39 profile image
Visweswar

Thanks mate..!

Collapse
 
derick1530 profile image
Derick Zihalirwa

You are welcome

Collapse
 
angelmtr profile image
Mosi

Thank You <3

Collapse
 
derick1530 profile image
Derick Zihalirwa

you are welcome mate

Collapse
 
rmscoal_84 profile image
Rifky Manuel Satyana

Awesomeeee. Helped me a lot. Thanks!

Collapse
 
derick1530 profile image
Derick Zihalirwa

Glad it helped ✅

Collapse
 
hevpro profile image
Hector Esquerdo Valverde

Thanks! Super cool!

Collapse
 
mustafadede profile image
Mustafa DEDE

Thank you!

Collapse
 
derick1530 profile image
Derick Zihalirwa

You re welcome mate, glad it helped!

Collapse
 
aditya_gupta profile image
Aditya

thanks for your work it helps me a lot. thanks once again

Collapse
 
derick1530 profile image
Derick Zihalirwa

Glad its helped!

Collapse
 
kunal_4ae6bda8bb34e688855 profile image
Kunal

Thank you, That worked for me

Collapse
 
minthang profile image
Minthang ML

It works!!
Thankyou bro

Collapse
 
derick1530 profile image
Derick Zihalirwa

Glad its helped!

Some comments have been hidden by the post's author - find out more