reslear
tailwind-scrollbar-hide
Tailwind plugin for hide scrollbars, although the element can still be scrolled if the element's content overflows.
Features
🎨 Tailwind v4.x, v3.x, v2.x.
📦 Zero dependencies
🛠️ Port for unocss-preset-scrollbar-hide
🎯 Pure CSS implementation for v4.x
Installation
Install the plugin from npm:
# Using npm
npm install tailwind-scrollbar-hide
# Using pnpm
pnpm add tailwind-scrollbar-hide
# Using Yarn
yarn add tailwind-scrollbar-hideTailwind v4 support
For Tailwind v4, you can use the following approach in your CSS configuration file:
/* index.css */
@import 'tailwindcss';
@import 'tailwind-scrollbar-hide/v4';This will automatically import and configure the plugin for Tailwind v4.
Note: Internet Explorer functionality has been dropped in Tailwind v4
Tailwind v2.x, v3.x support
For Tailwind v2.x and v3.x, add the plugin to your config file:
// tailwind.config.js
module.exports = {
theme: {
// ...
},
plugins: [
require('tailwind-scrollbar-hide')
// ...
]
}or using TypeScript:
// tailwind.config.ts
import type { Config } from 'tailwindcss'
import scrollbarHide from 'tailwind-scrollbar-hide'
export default {
theme: {
// ...
},
plugins: [scrollbarHide]
} satisfies ConfigUsage
Use in you template scrollbar-hide for visual hiding scrollbar
<div class="w-4 scrollbar-hide">...</div>or restore default value use scrollbar-default
⚠️ webkit overriding not working https://github.com/reslear/tailwind-scrollbar-hide/issues/19#issuecomment-1086949110 need switch breakpoint system
<div class="w-4 scrollbar-hide md:scrollbar-default">...</div>Plugin Inspiration
- https://github.com/tailwindlabs/tailwindcss-forms/tree/main
- https://github.com/tailwindlabs/tailwindcss/discussions/2310#discussioncomment-8592440