Last active
July 26, 2024 05:18
-
-
Save parafeu/3cf1c52d374a52091a685ce030563411 to your computer and use it in GitHub Desktop.
Scrollbar plugin tailwindcss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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') | |
} | |
) | |
}); |
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'
}
});
})],
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
@parafeu There is a missing style here. The
![Screen Shot 2022-04-27 at 12 36 14](https://user-images.githubusercontent.com/13790819/165596330-291cd2bf-c1fd-44d7-ae9d-883f26e112cd.png)
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