[TailwindCSS] TailwindCSS 스크롤바 숨기기

 

1. TailwindCSS 에서 제공하는 플러그인을 받아줍니다.

npm i tailwind-scrollbar-hide 

or

yarn add tailwind-scrollbar-hide

 

2. tailwind.config.js 수정 -> plugins 추가

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [require("tailwind-scrollbar-hide")],
};

 

3. 스크롤바를 숨기고 싶은곳에 적용해줍니다.

<div class="m-5 flex gap-4 overflow-x-auto pb-6 scrollbar-hide">
  <div class="w-56 flex-shrink-0 rounded bg-slate-300 p-2">Lorem ipsum dolorn</div>
  <div class="w-56 flex-shrink-0 rounded bg-slate-300 p-2">Lorem ipsum dolorn</div>
  <div class="w-56 flex-shrink-0 rounded bg-slate-300 p-2">Lorem ipsum dolorn</div>
  <div class="w-56 flex-shrink-0 rounded bg-slate-300 p-2">Lorem ipsum dolorn</div>
  <div class="w-56 flex-shrink-0 rounded bg-slate-300 p-2">Lorem ipsum dolorn</div>
  <div class="w-56 flex-shrink-0 rounded bg-slate-300 p-2">Lorem ipsum dolorn</div>
</div>