How to Customize Scrollbar in Tailwind CSS (Next.js/React)

Tailwind CSS does not provide a built-in way to style the scrollbar. However, you can achieve this by using ::-webkit-scrollbar pseudo-elements or a Tailwind plugin.

Method 1: Using Custom CSS in Tailwind

You can define custom styles inside your globals.css or tailwind.css file:

@layer utilities {
  .scrollbar::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  .scrollbar::-webkit-scrollbar-track {
    background: #f3f4f6;
    border-radius: 10px;
  }

  .scrollbar::-webkit-scrollbar-thumb {
    background: #4f46e5;
    border-radius: 10px;
  }

  .scrollbar::-webkit-scrollbar-thumb:hover {
    background: #4338ca;
  }
}

Then, apply it to the desired element:

<div className="scrollbar h-64 overflow-auto">Content Here</div>

Method 2: Using Tailwind Scrollbar Plugin

Another approach is using the tailwind-scrollbar plugin.

Step 1: Install the plugin

npm install --save-dev tailwind-scrollbar

Step 2: Configure `tailwind.config.js`

module.exports = {
  theme: {
    extend: {},
  },
  plugins: [require('tailwind-scrollbar')],
}

Step 3: Apply Tailwind Classes

<div className="scrollbar scrollbar-thumb-gray-900 scrollbar-track-gray-100 h-64">
  <div className="h-96">Scrollable Content</div>
</div>

Method 3: Using Arbitrary Variants (Tailwind 3.0+)

If you don't want to use a plugin, you can use arbitrary variants:

<div className="overflow-auto [&::-webkit-scrollbar-thumb]:bg-blue-500 [&::-webkit-scrollbar]:w-2">
  <div className="h-96">Scrollable Content</div>
</div>

FAQ

1. Will this work on Firefox?

By default, ::-webkit-scrollbar only works on WebKit-based browsers like Chrome and Edge. For Firefox, you can use:

.scrollbar {
  scrollbar-width: thin;
  scrollbar-color: #4f46e5 #f3f4f6;
}

2. How do I remove the scrollbar completely?

You can hide the scrollbar using:

.scrollbar-none::-webkit-scrollbar {
  display: none;
}

And apply it:

<div className="scrollbar-none">Content without scrollbar</div>

3. Can I apply different scrollbar styles for light and dark mode?

Yes, using Tailwind's dark mode utility:

.scrollbar::-webkit-scrollbar-thumb {
  background: #4f46e5;
}
.dark .scrollbar::-webkit-scrollbar-thumb {
  background: #9333ea;
}