DEV Community

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? before Final result Here are two steps to follow in order to hide a scrollbar in your HT...

Read full post

Collins Edim • Nov 24 '23 • Edited

Great share, Derick. This really helped me 🫡

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

@variants responsive {
}

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

Derick Zihalirwa • Dec 8 '23

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

胡永 • Nov 1 '23

you win chatgpt4 for this problem

Derick Zihalirwa • Nov 14 '23 • Edited

Thank you so much for your kind words!

Dipankar Paul • May 6 '24

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

tomartisan • Aug 27 '24

@layer base {
  * {
    @apply border-border;
  }
  html,
  body {
    @apply no-scrollbar;
  }
}

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

Derick Zihalirwa • Aug 28 '24

Nice one 💯

Abdirisakhd • Jan 18 '23

thanks this help me alot

Derick Zihalirwa • Jan 18 '23

Your are welcome

Francois18 • Jun 3 '22

Nice👏🎉

Derick Zihalirwa • Jun 3 '22

Thank you

Amsale Gebrehana • Mar 16 '24

Great! Thank you.

Zeeshan Safdar • Feb 25 '24

Amazing Derick. You solved my problem.

Amir Kermanshahani • Jun 17 '24

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

Derick Zihalirwa • Jul 8 '24 • 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 */
  }
}

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>

Abnet Wolde • Dec 27 '24

am the witness: it works

Derick Zihalirwa • Jan 5

that's pretty cool

Adam - The Developer • Nov 24 '23

thank you!

Derick Zihalirwa • Dec 8 '23 • Edited

I'm glad it helped

Azeem Asim • Feb 18

Great. Works like a charm.

Stephen Busayo Adegoke • May 8 '24

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

Mosi • Feb 16 '23

Thank You <3

Derick Zihalirwa • Jul 24 '23

you are welcome mate

Rifky Manuel Satyana • Jul 31 '23

Awesomeeee. Helped me a lot. Thanks!

Derick Zihalirwa • Aug 13 '23

Glad it helped ✅

Hector Esquerdo Valverde • Sep 14 '23

Thanks! Super cool!

Mustafa DEDE • Mar 24 '23

Thank you!

Derick Zihalirwa • Mar 28 '23

You re welcome mate, glad it helped!

paras231 • Sep 11 '23

Thanks this helped

Derick Zihalirwa • Oct 7 '23

Glad it helped

Alex Shalda • Mar 28 '24

Awesome!!!!

Visweswar • Apr 9 '24

Thanks mate..!

Derick Zihalirwa • Jul 8 '24

You are welcome

Minthang ML • May 25 '24

It works!!
Thankyou bro

Derick Zihalirwa • Aug 28 '24

Glad its helped!

Aditya • Jul 10 '24

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

Derick Zihalirwa • Aug 28 '24

Glad its helped!

Kunal • Aug 4 '24

Thank you, That worked for me

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