Don’t you hate it when scrollbars break your designs?

Scrollbar pushing content up

If you’re using Tailwind CSS, here are three ways to hide your scrollbar but still let your content scroll. This will work for all major browsers like Chrome, Firefox, Safari, and Edge.

1. Add a utility class (recommended)

Tailwind recommends adding utility classes under the utilities layer. You can add one in your global CSS file:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  /* Chrome, Safari and Opera */
  .scrollbar-hidden::-webkit-scrollbar {
    display: none;
  }

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

And use it like so:

<div className="scrollbar-hidden">
  <!-- ... -->
</div>

2. Add it to your Tailwind config

To add the utility class to your tailwind.config.js, you can use a Tailwind plugin. There are open-source plugins like tailwind-scrollbar-hide, but it's better to add it yourself to avoid extra dependencies:

/** @type {import('tailwindcss').Config} */

const plugin = require("tailwindcss/plugin")

module.exports = {
  plugins: [
    plugin(({ addUtilities }) => {
      addUtilities({
        /* Chrome, Safari and Opera */
        ".scrollbar-hidden::-webkit-scrollbar": {
          display: "none",
        },

        ".scrollbar-hidden": {
          "scrollbar-width": "none" /* Firefox */,
          "-ms-overflow-style": "none" /* IE and Edge */,
        },
      })
    }),
  ],
}

3. Use an arbitrary value

If you need it in one place, Tailwind lets you add arbitrary values without any configuration.

<div className="[&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]">
  <!-- ... -->
</div>