2 Ways to Style Scrollbar in TailwindCSS

A custom scrollbar is an awesome thing to have in website design. When working with TailwindCSS, you may need to have a custom scrollbar with your own styles. By default, as of now in TailwindCSS version 3.1, tailwind doesn’t provide any way to style the scrollbar. But, you can combine Tailwind classes to style your own custom scrollbar. There is also a plugin available that can do this job for you.

Method 1 – Custom Classes to Style Scrollbar

As there is no way to style a scrollbar in TailwindCSS, you can combine different classes in TailwindCSS to style a scrollbar. You have to style 3 things to get your desired scrollbar.

  1. Scrollbar
  2. Scrollbar Track
  3. Scrollbar Thumb

The following code example combines different TailwindCSS to style a scrollbar.

The next thing to do is to add these custom classes into HTML. The code snippet below adds these custom classes to a div container to have a customized scrollbar.

You check the working example and see how the custom-styled scrollbar works.

Method 2 – Use Plugin to Style the Scrollbar

You can use the TailwindCSS plugin to add custom styles for the scrollbar. All you need to do is import the plugin and add classes using the same plugin. Go to your tailwind.config.js and import the plugin at the top like the following snippet.

After importing the plugin, you need to add custom classes using this plugin. Go to tailwind.config.js again and find plugin: [] the array. Replace the code with the following snippet.

Now, go to your HTML file and add these custom-created classes.

Here is a demo of the above method used to design the scrollbar using a plugin.


There is no built-in class in TailwindCSS that you can use to style the scrollbar. There are 2 different ways to style the scrollbar. First, combine TailwindCSS classes to create custom classes and the second is to use tailwindcss plugin. Using these methods, you can easily have a custom-styled scrollbar in TailwindCSS.


Latest articles

Leave a reply

Please enter your comment!
Please enter your name here

Related articles