How to hide scrollbars with Tailwind CSS

Scrollbars serve an important purpose – they let users know there is more content to explore. But sometimes, especially in modern web design, they just do not fit the aesthetic you are going for.

Maybe you are building a sleek horizontal navigation, a custom image carousel, or a clean chat interface. Whatever the case, you want the scrolling functionality but not the visual clutter of scrollbars.

Good news: hiding scrollbars in Tailwind CSS is totally doable, and I will show you exactly how to do it the right way.

The browser compatibility challenge

Here is the thing about hiding scrollbars – different browsers need different approaches. Chrome and Safari use webkit-specific CSS properties, while Firefox has its own method, and older browsers like IE have their own quirks.

This means we need to write CSS that covers all these cases:

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

.scrollbar-hide {

scrollbar-width: none;

}
/* For IE and Edge */

.scrollbar-hide {

-ms-overflow-style: none;

}

The CSS covers all major browsers, but now we need to integrate this with Tailwind CSS properly.

Creating a custom utility class

The cleanest approach is to add a custom utility class to your Tailwind setup. You can add this to your main CSS file using the @layer utilities directive:

@layer utilities {
  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
.scrollbar-hide::-webkit-scrollbar {

display: none;

}

}

Now you can use scrollbar-hide alongside any of Tailwind's overflow utilities like overflow-auto, overflow-x-scroll, or overflow-y-auto.

Using Tailwind CSS v4 @utility directive

If you are using Tailwind CSS v4, there is an even cleaner way to define custom utilities using the new @utility directive:

@utility scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
&::-webkit-scrollbar {

display: none;

}

}

The v4 syntax is cleaner and uses nesting, which makes the code more readable. Plus, utilities created with @utility automatically work with all of Tailwind's variants like hover:, focus:, and responsive prefixes.

The webkit browser gotcha

Here is something important you need to know: in webkit browsers (Chrome, Safari, Opera), you cannot just override the scrollbar hiding to show it again. Once you hide it with ::-webkit-scrollbar { display: none; }, you cannot bring it back with another class.

So if you want responsive scrollbar visibility – like hidden on mobile but visible on desktop – you will need to be a bit creative:

This uses Tailwind's arbitrary variant feature to apply the scrollbar hiding only on smaller screens, which works perfectly in webkit browsers.

Real-world examples where this shines

Let me show you some practical examples where hidden scrollbars really improve the user experience:

Image Gallery

Horizontal Navigation

Dashboard Analytics User Management Settings Billing Support

These examples show how hidden scrollbars create cleaner, more professional-looking interfaces. The functionality is still there – users can scroll horizontally through the gallery or navigation – but the visual clutter is gone.

Don't forget accessibility

While hidden scrollbars look great, you should always consider accessibility. Some users rely on visual cues like scrollbars to understand that content is scrollable. Here are a few things to keep in mind:

• Add subtle visual hints like fade effects at the edges
• Include touch/swipe indicators on mobile
• Make sure keyboard navigation still works properly
• Consider using scroll-behavior: smooth for better UX

The fade effect and scroll indicator help users understand that there is more content to explore, even without the scrollbar.

That is how you hide scrollbars in Tailwind CSS! Whether you go with custom utilities, plugins, or Tailwind v4 new directive, you now have the tools to create clean, scrollable interfaces that do not compromise on functionality.

Remember to test across different browsers and always keep accessibility in mind. Your users will appreciate the cleaner look, and you will love how much more polished your interfaces appear.

Hope this helps you build better user experiences with Tailwind CSS!