TailWindCSSでScrollbarを消したかったのでメモ

個人アプリ制作で、TailWindCSSを使いました。
overflow-x-scrollなどスクロール関連のclassを使った時に、スクロールバーを表示したくないところがあったので調べてみました。意外と使う箇所が多かったので、次回のためにメモに残します。

スクロールバーを消す方法

class名は適当にhidden-scrollbarとします。
ブラウザによって、書き方が違うのですべてのブラウザに対応させるには、以下のように書きます。

stylesheets/application.tailwind.css

@layer utilities {
  .hidden-scrollbar {
    -ms-overflow-style: none; /* IE, Edge 対応 */
    scrollbar-width: none; /* Firefox 対応 */
  }
  .hidden-scrollbar::-webkit-scrollbar {
    /* Chrome, Safari 対応 */
    display: none;
  }
}

あとはスクロールバーを消したい箇所にhidden-scrollbarを書き足せばOKです。

<div class="overflow-x-scroll space-x-2 flex hidden-scrollbar">
...
</div>

参考記事