Add Tailwind custom class
June 06, 2024
Using plugins and addUtilities method we can add custom classes to Tailwindcss.
Example adding scrollbar-gutter support to Tailwindcss.
/** @type {import('tailwindcss').Config} */
export default {
// ...
theme: {
extend: {
// ...
// Create the properties
scrollbarGutter: {
stable: 'stable',
unset: 'unset',
'both-edges': 'both-edges'
}
}
},
plugins: [
// ...
function ({ addUtilities }) {
const newUtilities = {
// Set the class name
'.scrollbar-stable': {
scrollbarGutter: 'stable'
},
'.scrollbar-both-edges': {
scrollbarGutter: 'both-edges'
},
'.scrollbar-unset': {
scrollbarGutter: 'unset'
}
}
addUtilities(newUtilities, ['responsive', 'hover'])
}
]
}