Customize your scrollbar from tailwind directly.
yarn add -D @aumirza/tailwind-pseudo-scrollbar
or
npm install --save-dev @aumirza/tailwind-pseudo-scrollbar
Add plugin in your Tailwind config file.
plugins: [
// ...
require('@aumirza/tailwind-pseudo-scrollbar'),
],
This plugin is very easy to use. It adds
scrollbar: for '::-webkit-scrollbar'
scroll-button: for '::-webkit-scrollbar-button'
scroll-thumb: for '::-webkit-scrollbar-thumb'
scroll-track: for '::-webkit-scrollbar-track'
scroll-piece: for '::-webkit-scrollbar-track-piece'
scroll-corner: for '-webkit-scrollbar-corner'
scroll-resizer: for '::-webkit-scrollbar-resizer'
you can stack it other variants like hover: ,dark:, dark:hover: ,or with responsive variants like sm:,md:,lg: or xl:.
<div className="scrollbar:w-3 md:scrollbar:w-5 scrollbar:bg-gray-50 scroll-thumb:bg-slate-300 dark:scroll-thumb:bg-gray-100 hover:scroll-thumb:bg-slate-500 overflow-y-scroll">
</div>