🤖

TailWindCSSでScrollbarを消す方法

2022/03/04に公開

CSS

Tailwind CSS

scrollbar

tech

TailWindCSSでScrollbarを消す方法

TailWindCSSを使ってみてすごく便利だなーと思いつつ,対応してないプロパティなどもあり,それだとなんだかなーと思っていましたが,カスタマイズする方法もしっかりと用意されているので,スクロールバーの非表示を例に紹介します.

TailWindCSSのバージョンは3.0です.

TailWindCSSのclassを使ってスタイルできるものは以下のページのサイドメニューにあるものが全てです.

.content{
  overflow: scroll;
  -ms-overflow-style: none;    /* IE, Edge 対応 */
  scrollbar-width: none;       /* Firefox 対応 */
}

.content::-webkit-scrollbar {  /* Chrome, Safari 対応 */
  display:none;
}

上のスクロールバーを非表示にするためのプロパティはブラウザごとに異なることもあり,用意されていません.

TailWindCSSには base > components > utilities のスタイルの層があるのですが,

今回は utilities をカスタマイズすることで実装します.

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

globals.cssに上記を追加することで,hidden-scrollbarをclassにつければ,適応することができます.

やったーはっぴー

TailWindCSSでScrollbarを消す方法

Discussion