/*
https://github.com/tailwindlabs/tailwindcss/discussions/2394
https://github.com/tailwindlabs/tailwindcss/pull/5732
*/
@layer utilities {
/* Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {
display: none;
}
.no-scrollbar {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
}
<div className="no-scrollbar overflow-y-auto">
// Using npm
npm install tailwind-scrollbar-hide
// Using Yarn
yarn add tailwind-scrollbar-hide
// Using pnpm
pnpm add tailwind-scrollbar-hide
// then add class
scrollbar-hide -> done ❤️
// tailwind.config.js, you have to add it as plugin
module.exports = {
theme: {
// ...
},
plugins: [
require('tailwind-scrollbar-hide')
// ...
]
}