Tailwind CSS でスクロールは維持したまま、スクロールバーだけを見た目上非表示にしたい場合は tailwind-scrollbar-hide を使う。
インストール
npm install tailwind-scrollbar-hide
pnpm の場合:
pnpm add tailwind-scrollbar-hide
Tailwind CSS v4 の設定
Tailwind v4 では 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 を付ける。
<div class="overflow-x-auto scrollbar-hide">
...
</div>
スクロールバーは見えなくなるが、要素自体はスクロール可能なまま。
一部 breakpoint で戻す場合
scrollbar-default で通常表示に戻せる。
<div class="overflow-x-auto scrollbar-hide md:scrollbar-default">
...
</div>
ただし WebKit 系ブラウザでは ::-webkit-scrollbar の上書きが期待通り効かないケースがあるため、レスポンシブで表示/非表示を切り替える場合は実機確認する。