hide scrolbar tailwind
/* 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">
Source: stackoverflow.com
hide scrollbar in tailwind css
# Using npm npm install tailwind-scrollbar-hide # Using Yarn yarn add tailwind-scrollbar-hide Then add the plugin to your tailwind.config.js file: // tailwind.config.js module.exports = { theme: { // ... }, plugins: [ require('tailwind-scrollbar-hide') // add this to your plugins // ... ] } How to use it !! Use in you template scrollbar-hide for visual hiding scrollbar <div class="w-4 scrollbar-hide">...</div> Or!!! restore default value use scrollbar-default <div class="w-4 scrollbar-hide md:scrollbar-default">...</div>
no scrollbar tailwind
/* 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 */ }
Source: stackoverflow.com
how to hide scrollbar in tailwind css
@layer utilities { /* Used For Chrome, Opera and Safari */ .no-scrollbar::-webkit-scrollbar { display: none; } /* Used For Firefox: */ .no-scrollbar { scrollbar-width: none; } /* Used For MS Edge and IE: */ .no-scrollbar { -ms-overflow-style: none; } }