How to hide scrollbar on your element in Tailwind

#tailwindcss #react #webdev #tutorial

Hi there👋,

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

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>

Result

I hope you find this post useful.

Feel free to connect with me on Twitter

Top comments (23)

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