tailwind-scrollbar-hide

!npm
!npm

Tailwind plugin for hide scrollbars, although the element can still be scrolled if the element's content overflows.

🕹 Live Playground

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:

``sh


Using npm

npm install tailwind-scrollbar-hide

Using pnpm

pnpm add tailwind-scrollbar-hide

Using Yarn

yarn add tailwind-scrollbar-hide
`

$3

!Firefox >=64 Chrome >= 2 Safari >= 4

For Tailwind v4, you can use the following approach in your CSS configuration file:

`css
/ 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

$3

!Firefox >=64 Chrome >= 2 Safari >= 4 Internet Explorer >= 10


For Tailwind v2.x and v3.x, add the plugin to your config file:

`js
// tailwind.config.js
module.exports = {
theme: {
// ...
},
plugins: [
require('tailwind-scrollbar-hide')
// ...
]
}
`

or using TypeScript:

`ts
// tailwind.config.ts
import type { Config } from 'tailwindcss'
import scrollbarHide from 'tailwind-scrollbar-hide'

export default {
theme: {
// ...
},
plugins: [scrollbarHide]
} satisfies Config
`

Usage

Use in you template scrollbar-hide for visual hiding scrollbar

`html



`

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

`html



``

Plugin Inspiration

- https://github.com/tailwindlabs/tailwindcss-forms/tree/main
- https://github.com/tailwindlabs/tailwindcss/discussions/2310#discussioncomment-8592440

License

MIT