Scrollbar plugin tailwindcss

scrollbar.js

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

module.exports = plugin(function ({ addUtilities, matchUtilities, theme }) {
    const scrollbarTrackColorValue = (value) => ({
        '--scrollbar-track': value,
        '&::-webkit-scrollbar-track': {
            "background-color": value
        }
    })

    const scrollbarTrackRoundedValue = (value) => ({
        '&::-webkit-scrollbar-track': {
            "border-radius": value
        }
    });

    const scrollbarThumbColorValue = (value) => ({
        '--scrollbar-thumb': value,
        '&::-webkit-scrollbar-thumb': {
            "background-color": value
        }
    });

    const scrollbarThumbRoundedValue = (value) => ({
        '&::-webkit-scrollbar-thumb': {
            "border-radius": value
        }
    });

    addUtilities({
        '.scrollbar': {
            '--scrollbar-thumb': '#cdcdcd',
            '--scrollbar-track': '#f0f0f0',
            '--scrollbar-width': '17px',
            'scrollbar-color': 'var(--scrollbar-thumb) var(--scrollbar-track)',
            '&::-webkit-scrollbar': {
                'width': 'var(--scrollbar-width)',
                'height': 'var(--scrollbar-width)'
            }
        },
        '.scrollbar-thin': {
            '--scrollbar-width': '8px',
            'scrollbar-width': 'thin'
        }
    });

    Object.entries(theme('colors')).forEach(([colorName, color]) => {
        switch (typeof color) {
            case 'object':
                matchUtilities(
                    {
                        [`scrollbar-track-${colorName}`]: (value) => (scrollbarTrackColorValue(value)),
                        [`scrollbar-thumb-${colorName}`]: (value) => (scrollbarThumbColorValue(value))
                    },
                    {
                        values: color
                    }
                )
                break;
            case 'function':
                addUtilities({
                    [`.scrollbar-track-${colorName}`]: scrollbarTrackColorValue(color({})),
                    [`.scrollbar-thumb-${colorName}`]: scrollbarThumbColorValue(color({}))
                })
                break;
            case 'string':
                addUtilities({
                    [`.scrollbar-track-${colorName}`]: scrollbarTrackColorValue(color),
                    [`.scrollbar-thumb-${colorName}`]: scrollbarThumbColorValue(color)
                })
                break;
        }
    });

    matchUtilities(
        {
            'scrollbar-track-rounded': (value) => (scrollbarTrackRoundedValue(value)),
            'scrollbar-thumb-rounded': (value) => (scrollbarThumbRoundedValue(value))
        },
        {
            values: theme('borderRadius')
        }
    )
});

How to further use this plugin? Any documentation?

Hi ! You just have to require the js file in your plugins of your tailwind.config.js.
plugins: [ require('./src/plugins/tailwindcss/scrollbar.js') ]

It should work like adoxography/tailwind-scrollbar.

This works great thankyou.
scrollbar scrollbar-thin scrollbar-thumb-rounded scrollbar-thumb-zinc-300

this work on tailwind v3, thank you very much

All of them working except scrollbar-thin

@NecipAkgz scrollbar-thin works fine for me, try the snippet I commented above.

Thanks alot,
I've just tried this on my laravel project with webpack mix
scrollbar-thin works on y axis but not working on x axis

Can you try the revision i just made ? I forgot to apply height on ::-webkit-scrollbar pseudoelement

Thanks work purfectly <3

@parafeu There is a missing style here. The scrollbar-corner is styled automatically with a white background:
scrollbar scrollbar-thin scrollbar-thumb-rounded scrollbar-thumb-lime-600

I fixed this by adding the color styles for the corner element:
scrollbar scrollbar-thin scrollbar-thumb-rounded scrollbar-thumb-lime-600 scrollbar-corner-transparent

I've updated the code in my own fork to reflect both setting the color and rounding values to the corner element, but I will post it for posterity as well here:

Code

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

module.exports = plugin(function ({ addUtilities, matchUtilities, theme }) {
    const scrollbarTrackColorValue = (value) => ({
        '--scrollbar-track': value,
        '&::-webkit-scrollbar-track': {
            "background-color": value
        }
    })

    const scrollbarTrackRoundedValue = (value) => ({
        '&::-webkit-scrollbar-track': {
            "border-radius": value
        }
    });

    const scrollbarThumbColorValue = (value) => ({
        '--scrollbar-thumb': value,
        '&::-webkit-scrollbar-thumb': {
            "background-color": value
        }
    });

    const scrollbarThumbRoundedValue = (value) => ({
        '&::-webkit-scrollbar-thumb': {
            "border-radius": value
        }
    });

    const scrollbarCornerColorValue = (value) => ({
        '&::-webkit-scrollbar-corner': {
            "background-color": value
        }
    });

    const scrollbarCornerRoundedValue = (value) => ({
        '&::-webkit-scrollbar-corner': {
            "border-radius": value
        }
    });

    addUtilities({
        '.scrollbar': {
            '--scrollbar-thumb': '#cdcdcd',
            '--scrollbar-track': '#f0f0f0',
            '--scrollbar-corner': '#f0f0f0',
            '--scrollbar-width': '17px',
            'scrollbar-color': 'var(--scrollbar-thumb) var(--scrollbar-track) var(--scrollbar-corner)',
            '&::-webkit-scrollbar': {
                'width': 'var(--scrollbar-width)',
                'height': 'var(--scrollbar-width)'
            }
        },
        '.scrollbar-thin': {
            '--scrollbar-width': '8px',
            'scrollbar-width': 'thin'
        }
    });

    Object.entries(theme('colors')).forEach(([colorName, color]) => {
        switch (typeof color) {
            case 'object':
                matchUtilities(
                    {
                        [`scrollbar-track-${colorName}`]: (value) => (scrollbarTrackColorValue(value)),
                        [`scrollbar-thumb-${colorName}`]: (value) => (scrollbarThumbColorValue(value)),
                        [`scrollbar-corner-${colorName}`]: (value) => (scrollbarCornerColorValue(value))
                    },
                    {
                        values: color
                    }
                )
                break;
            case 'function':
                addUtilities({
                    [`.scrollbar-track-${colorName}`]: scrollbarTrackColorValue(color({})),
                    [`.scrollbar-thumb-${colorName}`]: scrollbarThumbColorValue(color({})),
                    [`scrollbar-corner-${colorName}`]: (scrollbarCornerColorValue({}))
                })
                break;
            case 'string':
                addUtilities({
                    [`.scrollbar-track-${colorName}`]: scrollbarTrackColorValue(color),
                    [`.scrollbar-thumb-${colorName}`]: scrollbarThumbColorValue(color),
                    [`.scrollbar-corner-${colorName}`]: scrollbarCornerColorValue(color)
                })
                break;
        }
    });

    matchUtilities(
        {
            'scrollbar-track-rounded': (value) => (scrollbarTrackRoundedValue(value)),
            'scrollbar-thumb-rounded': (value) => (scrollbarThumbRoundedValue(value)),
            'scrollbar-corner-rounded': (value) => (scrollbarCornerRoundedValue(value))
        },
        {
            values: theme('borderRadius')
        }
    )
});

This does not work, if you use css variables.
https://tailwindcss.com/docs/customizing-colors#using-css-variables

saved my life thanks

plugins: [require('@tailwindcss/typography'),
		plugin(function({ addUtilities, matchUtilities }) {
			matchUtilities(
				{
					'scroll-size': (value) => ({
						'&::-webkit-scrollbar': {
							width: `${value}px`,
							height: `${value}px`
						}
					})
				},
				{
					values: {
						'light': '1',
						2: '2',
						3: '3',
						4: '4',
						5: '5',
						6: '6',
						7: '7',
						8: '8',
						9: '9',
						'fat': '10'
					}
				}
			);
			addUtilities({
				'.scroll-invisible::-webkit-scrollbar': {
					'background-color': 'transparent'
				},
				'.scroll-visible::-webkit-scrollbar': {
					'background-color': 'initial'
				},
				'::-webkit-scrollbar': {
					width: '10px'
				},
				'.dark ::-webkit-scrollbar-track': {
					background: '#2f2f2f'
				},
				'.dark ::-webkit-scrollbar-thumb': {
					background: '#595757'
				},
				'.dark ::-webkit-scrollbar-thumb:hover': {
					background: '#706e6e'
				},
				'::-webkit-scrollbar-track': {
					background: '#c5c5c5'
				},
				'::-webkit-scrollbar-thumb': {
					background: '#8a8a8a'
				},
				'::-webkit-scrollbar-thumb:hover': {
					background: '#8a8a8a'
				}
			});
		})],