A custom scrollbar is an awesome thing to have in website design. When working with TailwindCSS, you may want to add custom styles to the scrollbar. By default, as of now in TailwindCSS version 3.3, tailwind doesn’t provide classes 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
The first method to style a scrollbar in TailwindCSS is to create your custom classes for scrollbar styles. You have to style 3 things to get your desired scrollbar. Here are the 3 things you can style.
- Scrollbar
- Scrollbar Track
- Scrollbar Thumb
The following code example combines different TailwindCSS to style a scrollbar. If you don’t know about @apply directive in TailwindCSS here is a complete guide about using @apply in TailwindCSS.
|
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 are 2 different ways to style the scrollbar. The first method is to combine TailwindCSS classes to create custom classes and the second is to use the TailwindCSS plugin. Using these methods, you can easily have a custom-styled scrollbar in TailwindCSS.