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

🕹 Live Playground

🎨 Tailwind v2.x, v3.x, v4.x

🛠️ Port for unocss-preset-scrollbar-hide

Install the plugin from npm:

# Using npm npm install tailwind-scrollbar-hide # Using Yarn yarn add tailwind-scrollbar-hide # Using pnpm pnpm add tailwind-scrollbar-hide

Then 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 Config

Use legacy configuration files like:

/* index.css */ @import 'tailwindcss'; @config "../../tailwind.config.js";

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 reslear#19 (comment) need switch breakpoint system

<div class="w-4 scrollbar-hide md:scrollbar-default">...</div>

• https://github.com/tailwindlabs/tailwindcss-forms/tree/main
• tailwindlabs/tailwindcss#2310 (comment)

MIT