xxxxxxxxxx
<div class="overflow-hidden">
<!-- Content with hidden scroll bar -->
</div>
xxxxxxxxxx
/*
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">
tailwind hide scrollbar
xxxxxxxxxx
<div className="overflow-x-auto" style={{ scrollbarWidth: 'none' }}>
xxxxxxxxxx
// It is super simple
// Just install this using yarn or npm:
// NPM
npm install tailwind-scrollbar-hide
// YARN
yarn add tailwind-scrollbar-hide
// Then in the tailwind.config.js or tailwind.config.ts add the plugin
// to the plugin array:
require('tailwind-scrollbar-hide')
// That is all, you can use the class in your app:
scrollbar-hide
xxxxxxxxxx
//global index.css
@tailwind base;
@tailwind components;
@tailwind utilities;
// add the code bellow
@layer utilities {
@variants responsive {
/* Hide scrollbar for Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {
display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
.no-scrollbar {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
}
}
xxxxxxxxxx
// 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 ❤️
xxxxxxxxxx
// tailwind.config.js, you have to add it as plugin
module.exports = {
theme: {
// ...
},
plugins: [
require('tailwind-scrollbar-hide')
// ...
]
}
xxxxxxxxxx
<style>
/* Hide the scrollbar */
/* For Firefox */
scrollbar-width: none;
/* For Chrome, Edge, and Safari */
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
-webkit-overflow-scrolling: touch; /* Safari */
/* Create a transparent scrollbar track */
::-webkit-scrollbar {
width: 0.5em;
background-color: transparent;
}
/* Create a transparent scrollbar thumb */
::-webkit-scrollbar-thumb {
background-color: transparent;
border-radius: 0.25em;
}
</style>
xxxxxxxxxx
<style>
/* Hide the scrollbar */
::-webkit-scrollbar {
display: none;
}
/* Optional: Add some spacing to keep the content away from the borders */
.scroll-container {
padding-right: 20px; /* Adjust as needed */
}
</style>
<div class="scroll-container overflow-y-scroll">
<!-- Your content here -->
</div>