yarn add -D tailwind-scrollbar

or

npm install --save-dev tailwind-scrollbar

next, include the plugin in your configuration:

plugins: [
    // ...
    require('tailwind-scrollbar'),
],

Here is a sample code snippet showcasing the use of the scrollbar utility:

<div class="h-32 scrollbar scrollbar-thumb-gray-900 scrollbar-track-gray-100">
    <div class="h-64"></div>
</div>

You can also customize scrollbar variants like so:

variants: {
    // ...
    scrollbar: ['dark']
}

If you need to modify the width of the scrollbar, you can do so in your tailwind.css file:

@layer utilities {
  .scrollbar-medium::-webkit-scrollbar {
    width: 12px;
  }
}

After customization, apply the new style to your element:

<div class="h-32 scrollbar scrollbar-thumb-gray-900 scrollbar-track-gray-100 scrollbar-medium">
    <div class="h-64"></div>
</div>

There is currently only one default style for scrollbars which is scrollbar-thin, but you can customize it further based on your needs.

I have successfully customized the scrollbar using a Tailwind plugin as shown below:

// tailwind.config.js

const plugin = require('tailwindcss/plugin');

module.exports = {
// ...
  plugins: [
    plugin(({ addBase, theme }) => {
        addBase({
            '.scrollbar': {
                overflowY: 'auto',
                scrollbarColor: `${theme('colors.blue.600')} ${theme('colors.blue.200')}`,
                scrollbarWidth: 'thin',
            },
            '.scrollbar::-webkit-scrollbar': {
                height: '2px',
                width: '2px',
            },
            '.scrollbar::-webkit-scrollbar-thumb': {
                backgroundColor: theme('colors.blue.600'),
            },
            '.scrollbar::-webkit-scrollbar-track-piece': {
                backgroundColor: theme('colors.blue.200'),
            },
        });
    }),
],
// ...
};

You can implement it like this:

<div class="scrollbar">
    <!-- content -->
</div>

/* Styling Scrollbars for Different Browsers */

/* For Firefox Browser */
.scrollbar {
  scrollbar-width: thin;
  scrollbar-color: #000 #fff;
}

/* For Chrome, EDGE, Opera, and Others */
.scrollbar::-webkit-scrollbar {
  width: 20px;
}

.scrollbar::-webkit-scrollbar-track { 
  background: #fff;
}

.scrollbar::-webkit-scrollbar-thumb { 
  background:#000;
}

The latest update to TailwindCSS's documentation has introduced new styles for scrollbars using the plugin they are utilizing:

scrollbar:!w-1.5 scrollbar:!h-1.5 scrollbar:bg-transparent scrollbar-track:!bg-slate-100 scrollbar-thumb:!rounded scrollbar-thumb:!bg-slate-300 scrollbar-track:!rounded

/** @type {import('tailwindcss').Config} */
module.exports = {
  mode: 'jit',
  content: ['./src/**/*.{html,ts,tsx,js}'],
  darkMode: 'media',
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [
    // Link to the source code where these variants were added
    function ({ addVariant }) {
      addVariant(
        'supports-backdrop-blur',
        '@supports (backdrop-filter: blur(0)) or (-webkit-backdrop-filter: blur(0))',
      );
      addVariant('supports-scrollbars', '@supports selector(::-webkit-scrollbar)');
      addVariant('children', '& > *');
      addVariant('scrollbar', '&::-webkit-scrollbar');
      addVariant('scrollbar-track', '&::-webkit-scrollbar-track');
      addVariant('scrollbar-thumb', '&::-webkit-scrollbar-thumb');
    },
  ],
};

Enhance Tailwind's capabilities by incorporating your own foundational styles in addition to Preflight. Simply include them in your CSS file using a @layer base directive:

// Add the following code inside styles.css

@tailwind base; 
@tailwind components;
@tailwind utilities;

@layer base {
::-webkit-scrollbar-thumb{
@apply bg-transparent shadow-sm
}
::-webkit-scrollbar{
@apply w-3 bg-transparent
}
::-webkit-scrollbar-thumb{
@apply rounded-none bg-blue-400 /*customize trackbar color*/
}

}

For more information, refer to the documentation [here][1] [1]: https://tailwindcss.com/docs/preflight

Furthermore, in addition to the previous comment:

To implement a dark theme option, simply include the following code snippet and name it as desired:

<div className="... overflow-auto scrollbar dark:scrollbarkdark> ...

Next, make sure to add the corresponding styles in your main CSS file as detailed in the aforementioned comment.

.scrollbar::-webkit-scrollbar-track {
    background: white;
}
.scrollbardark::-webkit-scrollbar-track {
    background: black;
}
...

If you're looking to avoid using plugins and keep your CSS clean, here's an alternative with a customizable variant:

<div class="[&::-webkit-scrollbar]:[width:30px]
            [&::-webkit-scrollbar-thumb]:bg-red-500
            overflow-scroll">
</div>

https://tailwindcss.com/docs/hover-focus-and-other-states#using-arbitrary-variants

After some experimentation, I successfully implemented a solution by combining css and tailwind in my globals.css file. By using the @layer directive at the base level, the styles are applied globally across the entire website. Additionally, with the use of @apply, we can easily declare styles using tailwind classes. In this particular instance,

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  /* width */
  ::-webkit-scrollbar {
    @apply w-2
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
    @apply bg-inherit
  }
  
  /* Handle */
  ::-webkit-scrollbar-thumb {
    @apply bg-pink-200 dark:bg-violet-600 rounded-xl
  }
  
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    @apply bg-violet-700
  }
}