◀▷kame-Blog

contact

tailwind-scrollbarで 簡単にscrollbarをカスタムする

公開日
2023-03-02
投稿者
Ryosuke Kamei
#tag
#scrollbar#tailwind css

tailwind-scrollbar

今回スクロールバーの色と動きを簡単に調整します。

まずはインストールから


npm install --save-dev tailwind-scrollbar

インストールが完了したら

tailwind.config,js
plugins: [
    // ...
    require('tailwind-scrollbar'),
],

プラグインしたら使えるようになる。


後はこんな感じでスタイルする

className=’scrollbar scrollbar-track-gray-400/20 scrollbar-thumb-[任意の色]’

とりあえずこれをトップコンポーネント指定しておけば大丈夫