[이슈] : Tailwind CSS 사용 시 스크롤바 숨기기

📋 내용 : Tailwind CSS의 클래스로 스크롤바 숨기기

한 페이지에 컨텐츠가 전부 표시되지 않을 경우, 브라우저는 스크롤바를 통해 화면을 스크롤할 수 있게 합니다.

다만 이 스크롤바가 디자인을 해치는 경우가 있어서 스크롤바를 숨기고 싶은 경우도 많이 생기는데요, w3schools 에 나와있는 스크롤을 숨기는 방법을 살펴보겠습니다.

/* 클래스명이 example인 요소의 스크롤바를 숨기는 코드 */

.example::-webkit-scrollbar {
  display: none;
}

.example {
  -ms-overflow-style: none;  /* IE and 엣지 */
  scrollbar-width: none;  /* 파이어폭스 */
}

이 방법은 분명 동작합니다!

다만 추가적인 CSS 파일 생성을 지양하려 할 때, Tailwind CSS의 클래스만으로 스크롤바를 숨길 수는 없을까요?

🛠 Tailwind CSS의 플러그인 사용하기, tailwind-scrollbar-hide

yarn add tailwind-scrollbar-hide

바로 이럴 때 테일윈드의 플러그인을 활용할 수 있는데요, tailwind-scrollbar-hide를 사용하면 클래스명을 통해 스크롤바를 숨길 수 있게 됩니다.

// tailwind.config.js

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")],
};

설치한 모듈(플러그인)명을 tailwind.config.js의 plugins 목록에 위와 같이 전달한 뒤, scrollbar-hide 라는 속성을 사용해 보겠습니다.

(※ scrollbar-hide는 기본 테일윈드의 속성이 아닌 플러그인으로 추가한 스타일로, 이렇게 플러그인을 활용해 스타일을 확장할 수 있습니다!)

// scrollbar-hide 클래스명을 활용한 모습입니다.

<div className="flex-grow h-screen scrollbar-hide">
    <div className="mx-auto max-w-md md:max-w-lg">
    <Stories data={stories} />
    <InputBox />
    </div>
</div>

이제 스크롤바가 사라진 것을 확인할 수 있습니다!

이슈라고 하긴 애매하지만, 새로운 CSS를 생성하지 않고도 플러그인을 활용해 스타일을 추가할 수 있음을 알면 유용할 듯 하네요! 😄

관련 검색어

• how to hide scrollbar with tailwind
• tailwind scrollbar hide