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') | |
} | |
) | |
}); |
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'
}
});
})],
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Can you try the revision i just made ? I forgot to apply height on ::-webkit-scrollbar pseudoelement