DEV Community

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

Posted on • Edited on

How to hide scrollbar on your element in TailwindCSS

#tailwindcss #react #webdev #tutorial

Hi there👋,

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

before
Before

Final result
After

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

I hope you find this post useful.

Feel free to connect with me on Twitter

Top comments (38)

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
 
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
 
iamdipankarpaul profile image
Dipankar Paul •

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

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
 
zeeshansafdar48 profile image
Zeeshan Safdar •

Amazing Derick. You solved my problem.

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
 
abnet_wolde_39cc5c5851afc profile image
Abnet Wolde •

am the witness: it works

Thread Thread
 
derick1530 profile image
Derick Zihalirwa •

that's pretty cool

Collapse
 
xbdirisxk profile image
Abdirisakhd •

thanks this help me alot

Collapse
 
derick1530 profile image
Derick Zihalirwa •

Your are welcome

View full discussion (38 comments)

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

Read next

techelopment profile image

npm start...the server is up&running!

Techelopment -

jajera profile image

Getting Started with Python: Creating a Hello World Project Using Poetry

John Ajera -

prince_beec5ccde00b7c6c73 profile image

Interactive cards hover using the html css and javascript. Follow us on the instagram for more....

Prince -

prince_beec5ccde00b7c6c73 profile image

Animation loader with latest ui/ux effects using the html css and javascript

Prince -