[Tailwind CSS] 스크롤바 지우기

Tailwind CSS 스크롤바 지우기

Tailwind CSS의 플러그인을 이용하여 스크롤바를 지우겠습니다.

 

사진

적용 전 / 후

반응형

---

명령어

# npm 
npm i tailwind-scrollbar-hide

# yarn
yarn add tailwind-scrollbar-hide

 

플러그인

// tailwind.config.js

module.exports = {
  ...,
  plugins: [require("tailwind-scrollbar-hide")],
};

 

코드 예시

이제 아래 예시처럼 scrollbar-hide를 사용하시면 됩니다.

// example
<div
  className="scrollbar-hide overflow-x-scroll flex flex-row space-x-6 w-full "
>
  {[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1].map((_, index) => (
    <div
      key={index}
      className="relative flex-shrink-0 aspect-square w-[250px]"
    >
      <div className="absolute top-2 left-2">
        <DeleteBtn onClick={() => deleteHouse(index)} />
      </div>
      <div className="bg-gray-300 aspect-square rounded-md mb-2" />
      <div className="font-semibold">숙소 이름1</div>
      <div className="text-gray-600">등록일 : 2024년 1월 1일</div>
    </div>
  ))}
</div>