tailwind-scrollbar

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

<!-- The h-32 is just there to force the child to overflow -->
<div class="scrollbar-thin scrollbar-thumb-blue-700 scrollbar-track-blue-300 h-32 overflow-y-scroll">

    <!-- This element is just here so that something overflows the parent -->
    <div class="h-64 bg-gray-400"></div>
</div>

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

<!--
hover:scrollbar-thumb-* attributes only work in webkit browsers, but Firefox
forces a hover effect either way.
-->
<div class="h-32 scrollbar scrollbar-thumb-blue-700 scrollbar-track-blue-300 overflow-y-scroll hover:scrollbar-thumb-green-700">
    <div class="h-64 bg-gray-400"></div>
</div>

module.exports = {
    theme: {
        extend: {
            colors: {
                custom: {
                    DEFAULT: '#10B981',
                    light: '#D1FAE5'
                }
            }
      }
    },
    plugins: [
        require('tailwind-scrollbar')
    ]
};

<div class="h-32 scrollbar scrollbar-thumb-custom scrollbar-track-custom-light overflow-y-scroll">
    <div class="h-64 bg-gray-400"></div>
</div>

module.exports = {
    darkMode: 'media',  // or darkMode: 'class'
    plugins: [
        require('tailwind-scrollbar')
    ],
    variants: {
        scrollbar: ['dark']
    }
};

<div class="h-32 scrollbar scrollbar-thumb-blue-700 scrollbar-track-blue-300 overflow-y-scroll dark:scrollbar-thumb-blue-100 dark:scrollbar-track-gray-700">
    <div class="h-64 bg-gray-400"></div>
</div>

module.exports = {
    plugins: [
        require('tailwind-scrollbar')
    ],
    variants: {
        scrollbar: ['rounded']
    }
};

<!-- *-rounded-* utilities only work in webkit-based browsers -->
<div class="h-32 scrollbar-thin scrollbar-thumb-blue-700 scrollbar-track-blue-300 overflow-y-scroll scrollbar-thumb-rounded-full scrollbar-track-rounded-full">
    <div class="h-64 bg-gray-400"></div>
</div>