[tailwind css] 스크롤 안보이게 하기 / 2가지 방법

우리가 평소 css로 스크롤바를 숨길 때 사용하는 방법이다.

.scroll {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}
.scroll::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera*/
}

 

 

프로젝트를 진행하던중 스크롤 바를 안 보이게 하고 싶은데

 

이를 tailwind로 하는 방법이 너무 모르겠어서 어떻게 해야 하나 구글링 진행

 

대부분의 방법으로  Tailwind 플러그인인 tailwind-scrollbar-hide를 사용하는 것을 알려주었다.

 

방법 1   - Tailwind 플러그인 tailwind-scrollbar-hide

yarn add tailwind-scrollbar-hide

위처럼 설치해주고 

 

//tailwind.config.js

module.exports = {
  ...
  // 이 부분을 추가
  plugins: [require("tailwind-scrollbar-hide")],
};

tailwind.config.js 파일로 이동하여 

 plugins: [require("tailwind-scrollbar-hide")], 이 부분을 추가해준다. 

 

그러고 나서 사용방법은 

 

 

className="scrollbar-hide"    className에 scrollbar-hide를 넣어주면 간단하게 사용이 가능하다. 

 

---

방법 2  - css 로 추가해 주기

 

그런데 나는 위 방법이 다양한 곳에서 사용한다면 당연히 좋지만 한 군데에서만 필요하다면? 

그렇다면 위처럼 플러그인을 설치하는 것보다 css 코드만 세줄 추가해 주면 될 것 같은데 다른 방법이 없을지 고민하게 되었다. 

 

그래서 여러 방법으로 넣어보다가 아래처럼 넣으니 성공이다.

<div
  className={`overflow-scroll [&::-webkit-scrollbar]:hidden`}
  style={{
  scrollbarWidth: 'none',
   msOverflowStyle: 'none',
  }}
>

 

 

맨 위의 css 코드를 어떻게 넣어줄 수 있을까 고민하다가 이런 방식으로 넣어주니 스크롤 바를 없애줄 수 있었다. 

 

 

 

만약 스크롤바를 없애는 곳이 많다면 플러그인을 설치하고 

사용하는 곳이 많지 않다면 위처럼 사용하면 좋을 것 같다.