Tailwind에서 스크롤바 없애기

웹사이트에서 스크롤바를 보이지않게 하고 스크롤기능만 사용하고 싶을 때 tailwind를 이용해 적용하는 방법입니다.

1. 모듈 설치

• npm intsall tailwind-scrollbar-hide
  또는
• yarn add tailwind-scrollbar-hide

2. tailwind.config.js 에 plugins 추가

module.exports = {
  mode: "jit",
  purge: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [require("tailwind-scrollbar-hide")],  // 이 부분을 추가해줍니다!
};

3. 쓰고싶은 컴포넌트에 사용

<ul className='order-1 flex flex-col overflow-y-auto lg:order-none ..어쩌고다른속성 scrollbar-hide'>