DEV Community

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

Posted on • Updated on

How to hide scrollbar on your element in TailwindCSS

Hi there👋,

You don't want your UI to look like this?

Before

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 */
    }
  }


Enter fullscreen mode Exit fullscreen mode

At this point we added ::-webkit-scrollbar to target the scrollbar style in Chrome,Safari, Edge and Opera.

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>

Enter fullscreen mode Exit fullscreen mode




Result

After

I hope you find this post useful.

Feel free to connect with me on Twitter

Top comments (35)

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

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