tailwind-scrollbar-hide

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

🕹 Live Playground

💡 Note: You might not need this plugin, just add these utilities to your Tailwind config using complex utilities (see example), or continue using this plugin for a ready-to-use solution.

Features

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

📦 Zero dependencies

🎯 Pure CSS implementation for v4.x

🛠️ Port for unocss-preset-scrollbar-hide

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-hide

Tailwind v4 support

Note: Internet Explorer functionality has been dropped in Tailwind v4

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.

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 Config

Usage

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

License

MIT