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.
- Scrollbar
- Scrollbar Track
- Scrollbar Thumb
The following code example combines different TailwindCSS to style a scrollbar.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
@tailwind base; @tailwind components; @tailwind utilities; // styling the scrollbar width and height .scrollbar-thin::-webkit-scrollbar { @apply w-2 h-2 } // adding background to track .scrollbar-track-gray-200::-webkit-scrollbar-track { @apply bg-gray-200 } // styling scrollbar thumb .scrollbar-thumb-dark-gray-400::-webkit-scrollbar-thumb { @apply bg-gray-400 rounded-full border-2 border-gray-400 } // adding hover state on thumb .scrollbar-hover-black::-webkit-scrollbar-thumb:hover { @apply bg-black } |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<div class="text-gray-500 bg-white rounded-lg w-full max-w-xl sm:h-96 p-6 overflow-y-scroll scrollbar-thin scrollbar-track-gray-200 scrollbar-thumb-dark-gray-400 scrollbar-hover-black "> <h1 class="text-lg text-gray-800">Custom Scrollbar in TailwindCSS</h1> </div> |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
const plugin = require('tailwindcss/plugin'); module.exports = { theme: { extend: { }, }, variants: {}, plugins: [], } |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
const plugin = require('tailwindcss/plugin'); module.exports = { theme: { extend: { }, }, variants: {}, plugins: [ plugin(({ addBase, theme }) => { addBase({ '.scrollbar': { overflowY: 'auto', scrollbarWidth: 'thin', }, '.scrollbar-thin::-webkit-scrollbar': { height: '10px', width: '10px', }, '.scrollbar-thumb-gray-400::-webkit-scrollbar-thumb': { backgroundColor: theme('colors.gray.400'), borderRadius: '400px' }, '.scrollbar-track-gray-300::-webkit-scrollbar-track-piece': { backgroundColor: theme('colors.gray.300'), }, '.scrollbar-hover-black::-webkit-scrollbar-thumb:hover': { backgroundColor: theme('colors.black'), }, }); }), ], } |
Now, go to your HTML file and add these custom-created classes.
|
1 2 3 4 5 6 7 8 9 10 |
<div class="text-gray-500 bg-white rounded-lg w-full max-w-xl sm:h-96 p-6 overflow-y-scroll scrollbar scrollbar-thin scrollbar-track-gray-300 scrollbar-thumb-gray-400 scrollbar-hover-black"> <h1 class="text-lg text-gray-800">Custom Scrollbar in TailwindCSS</h1> </div> |
Here is a demo of the above method used to design the scrollbar using a plugin.
Conclusion
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.