Tailwind에서 스크롤바 숨기기

Tailwind CSS를 사용해 스타일링을 하던 중, 스크롤바를 숨기고 싶었습니다. 하지만 Tailwind 공식 문서에서는 기본적으로 스크롤바를 숨기는 유틸리티 클래스를 제공하지 않는다는 걸 알게 되었고, 이에 대한 해결 방법을 찾던 중, tailwind-scrollbar-hide 플러그인을 활용하면 간단하게 해결할 수 있다는 것을 발견했습니다.

📌 Tailwind에서 기본적으로 스크롤바를 숨길 수 없을까?

Tailwind는 다양한 스타일링 유틸리티를 제공하지만, 기본적으로 스크롤바를 숨기는 클래스를 포함하고 있지 않습니다. 따라서 직접 스타일을 추가하거나, 플러그인을 활용해야 합니다.

여기서는 tailwind-scrollbar-hide 플러그인을 사용해 스크롤바를 숨기는 방법을 소개합니다.

---

🔧 tailwind-scrollbar-hide 플러그인 설치 및 설정

1️⃣ 플러그인 설치

아래 명령어 중 사용하는 패키지 매니저에 맞게 설치합니다.

// npm
npm install tailwind-scrollbar-hide

// yarn
yarn add tailwind-scrollbar-hide

// pnpm 
pnpm add tailwind-scrollbar-hide

2️⃣ Tailwind 설정 파일(tailwind.config.ts) 수정

설치한 플러그인을 Tailwind 설정 파일에 추가합니다.

import type { Config } from 'tailwindcss';

export default {
  content: [
    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      colors: {
        background: 'var(--background)',
        foreground: 'var(--foreground)',
      },
    },
  },
  plugins: [require('tailwind-scrollbar-hide')],
} satisfies Config;

3️⃣ scrollbar-hide 클래스 적용

이제 scrollbar-hide 클래스를 적용하면 스크롤바를 감출 수 있습니다.

<div className="scrollbar-hide overflow-auto h-64">
  {/* 내용 */}
</div>

위처럼 scrollbar-hide를 적용하면 해당 요소의 스크롤바가 완전히 숨겨진다.

---

(추가) scrollbar-hide 플러그인 없이 구현하는 방법

만약 추가적인 플러그인을 설치하지 않고 직접 Tailwind에서 구현하고 싶다면 @layer utilities를 활용해 아래와 같이 직접 스타일을 추가할 수도 있습니다.

@layer utilities {
  .scrollbar-hide {
    &::-webkit-scrollbar {
      display: none;
    }
    scrollbar-width: none;
  }
}

이렇게 하면 Tailwind의 @apply 기능을 활용하여 scrollbar-hide 클래스를 사용할 수 있습니다.

<div className="scrollbar-hide overflow-auto h-64">
  {/* 내용 */}
</div>

---

마무리

Tailwind CSS에서는 기본적으로 스크롤바를 숨기는 유틸리티 클래스를 제공하지 않기 때문에, tailwind-scrollbar-hide 플러그인을 활용하거나 직접 @layer utilities를 이용해 스타일을 추가하는 방법을 사용할 수 있습니다.

---

✅ 참고

• npm tailwind-scrollbar-hide

• tailwind v3 docs