How to hide the scrollbar with Tailwind CSS

This post was originally posted on Design2Tailwind.

Scrollbars are visual indicators we’re all used to when browsing the web but for us developers, sometimes we just don’t want to show them.

Browser compatibility for hiding them has evolved a lot over the years but right now you need at least 2 CSS declarations to do it (thanks StackOverflow):

/* For Webkit-based browsers (Chrome, Safari and Opera) */
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

/* For IE, Edge and Firefox */
.scrollbar-hide {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

With this, you can now use the .scrollbar-hide class on an overflowing container to hide the scrollbar, here’s an example using Tailwind’s utility classes:

<div class="flex whitespace-nowrap overflow-auto scrollbar-hide">
    <!-- overflowing content -->
</div>

But if you’re a tailwind lover, like me, instead of creating a custom CSS declaration you probably want a more tailwind-centric approach. Here’s where it gets interesting.

There’s a plugin for that

Well, there are actually 2, but both do the same thing:

1. https://github.com/reslear/tailwind-scrollbar-hide
2. https://github.com/redwebcreation/tailwindcss-no-scrollbar

I like the first one better because it has better docs and examples but you can pick whichever you prefer.

Using our previous example and plugin #1, here's how it would work:

Install the plugin

On your terminal

npm install tailwind-scrollbar-hide
# or 
yarn add tailwind-scrollbar-hide

Then on your tailwind.config.js, you add the package on your plugins array:

// tailwind.config.js
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('tailwind-scrollbar-hide')
    // ...
  ]
}

Now you can use the scrollbar-hide class, without writing any custom CSS 😄.

Sounds easy enough, right?

There’s one catch

This CSS solution is optimal but there’s actually one big issue, in WebKit-based browsers (Chrome, Safari, and Opera) you cannot override the class, you can only remove it. Let me explain:

Using our original example, let’s say you want to show the scrollbar, on bigger breakpoints, like this:

<div class="flex whitespace-nowrap overflow-auto scrollbar-hide md:scrollbar-default">
    <!-- overflowing content -->
</div>

⭐ Remember that the scrollbar-hide and scrollbar-default classes come from the plugin, these classes don’t exist on Tailwind itself.

This doesn’t work in Chrome and Safari, and it's not the plugin’s fault, it’s how the scrollbar works in WebKit browsers, mainly this:

::-webkit-scrollbar cannot be simply overridden to get the default style, the only way to do it is to remove all ::-webkit-scrollbar rules from the code. 

This is an issue documented by the plugin’s author and his recommendation is to change the breakpoint to be desktop-first instead of mobile-first or remove the class with Javascript.

Here’s how to do the first recommendation, in the tailwind config:

// tailwind.config.js
module.exports = {
  theme: {
    screens: {
      md: { max: '767px' },
    },
  },
  plugins: [require('tailwind-scrollbar-hide')],
}

Now, I know this does the job but I find it a bit excessive since you’re changing the behavior of a very common breakpoint and you’re probably only using that class in a handful of places.

After doing some research I found we can also use the new arbitrary variant feature for this!

⭐ Keep in mind you have to be using Tailwind CSS’ 3.1 version or higher for this to work.

Going back again to our original example, we can modify it by using an arbitrary variant like this:

<div class="flex whitespace-nowrap overflow-auto 
    [@media(max-width:767px)]:scrollbar-hide"> <!-- I put it on its own line to make it clearer -->
    <!-- overflowing content -->
</div>

Check this Tailwind Play link for a demo. And check this to learn more about arbitrary variants.

That’s it for this one! I hope you learned how to hide scrollbars using Tailwind CSS and how arbitrary variants can help you create a more robust solution depending on your use case.