DEV Community

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

Posted on ā€¢ Edited on

199 6 6 10 6

How to hide scrollbar on your element in TailwindCSS

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

Image of Timescale

šŸš€ pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applicationsā€”without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more

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

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