How to hide scrollbar on your element in TailwindCSS

before

Final result

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

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>

I hope you find this post useful.

Feel free to connect with me on X

Comments

[Prince George]

Thank you 👍

[Najib ullah]

must add overflow-auto**

[Derick Zihalirwa]

can you elaborate

[Ahammed Nibras]

thanks

[Azeem Asim]

Great. Works like a charm.

[tomartisan]

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

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

[Derick Zihalirwa]

Nice one 💯

[Kunal]

Thank you, That worked for me

[Aditya]

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

[Derick Zihalirwa]

Glad its helped!

[Amir Kermanshahani]

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

[Derick Zihalirwa]

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]

am the witness: it works

[Derick Zihalirwa]

that's pretty cool

[Minthang ML]

It works!!
Thankyou bro

[Derick Zihalirwa]

Glad its helped!

[Stephen Busayo Adegoke]

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