Hi there👋,

Most of the time to make a good user interface(UI), you have to
sacrifice some elements, in some of the ways, scrollbar.

In this article we are going to go through steps in order to achieve a satisfied scrolling experience in our React app using Tailwind css.

At this point we have the assumption that you already set up tailwind in your React app and ready to use.

First we need to go to our index.css file:

//global index.css
@tailwind base;
@tailwind components;
@tailwind utilities;

From there let add a couple of codes just bellow@tailwind utilities;


@layer utilities {
    @variants responsive {
      /* 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.

Example

after adding the code above in your global index.css

Let's assume your code was like this before:

<div className="w-full h-42 overflow-y-scroll">...</div>

to hide the scrollbar add no-scrollbar inside that peace of code

Now Your code should look something like this:

<div className="w-full h-42 overflow-y-scroll no-scrollbar">...</div>

🎉Congratulation, Now you know how to hide the scrollbar in a React application using Tailwind CSS.

I hope you find this post useful and interesting.

Feel free to connect with me on Twitter