Tailwind CSSでスクロールバーを非表示にする / PaPut

mizulba

1年以上前

Tailwind CSSでスクロールバーを非表示にする

Nuxt.js

知識

Tailwind CSS でスクロールは維持したまま、スクロールバーだけを見た目上非表示にしたい場合は tailwind-scrollbar-hide を使う。

インストール

npm install tailwind-scrollbar-hide

pnpm の場合:

pnpm add tailwind-scrollbar-hide

Tailwind CSS v4 の設定

Tailwind v4 では CSS 側で読み込む。

css

/* index.css など */
@import 'tailwindcss';
@import 'tailwind-scrollbar-hide/v4';

Tailwind CSS v2 / v3 の設定

tailwind.config.js に plugin を追加する。

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

tailwind.config.ts の場合:

import type { Config } from 'tailwindcss'
import scrollbarHide from 'tailwind-scrollbar-hide'

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

使い方

スクロールバーを隠したい要素に scrollbar-hide を付ける。

html

<div class="overflow-x-auto scrollbar-hide">
  ...
</div>

スクロールバーは見えなくなるが、要素自体はスクロール可能なまま。

一部 breakpoint で戻す場合

scrollbar-default で通常表示に戻せる。

html

<div class="overflow-x-auto scrollbar-hide md:scrollbar-default">
  ...
</div>

ただし WebKit 系ブラウザでは ::-webkit-scrollbar の上書きが期待通り効かないケースがあるため、レスポンシブで表示/非表示を切り替える場合は実機確認する。