[Tailwind CSS] 전체 화면 스크롤 바 없애기(Header 고정)

전체 화면의 스크롤 바를 없애고 싶었다. 스크롤 바가 보이면 영 별로인 것 같아 예전부터 스크롤바는 무조건 hidden 시켰다.

참고로, Styled-Components를 사용할 때는 다음의 코드를 사용했었다. 

 overflow-y: scroll;

  &::-webkit-scrollbar {
    display: none;
  }

Tailwind을 사용할 때는 스크롤 기능을 어떻게 만져줘야하는지, 스크롤바는 어떻게 없애는지 살펴보자. 헤더 위치는 고정시켜줄 것이다.

 

먼저 전체 화면이 아닌 특정 컴포넌트에서 스크롤 바를 없애는 방법은 아래와 같다.

가장 먼저, 추가적인 Tailwind의 플러그인 설치를 해야한다.

npm import tailwind-scrollbar-hide

이를 통해 tailwind-scrollbar-hide를 사용하면 클래스명을 통해 스크롤바를 숨길 수 있게 된다. 

다운로드가 완료 되었으면 tailwind.config.js 파일을에 plugins 부분을 수정해준다.

// 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 속성을 추가해 스타일을 확장시켜주면 된다. 위 방법을 통한 스크롤바 없애기는 전체 화면에서는 적용되지 않았다. 

 

구글링을 통해 찾아보니 전체 화면에서의 적용은 다른 방법을 사용해야 했다.

아래의 코드는 index.js 코드이다.

Tailwind 공식 홈페이지를 참고하여 overflow-auto 속성을 클래스를 추가해준다. 이 속성을 추가해주지 않으면 헤더 길이가 확 줄면서 찌부짜부가 된다.

TestList 컴포넌트만 스크롤이 적용되고 헤더들은 위에 딱 붙어있게 만들고 싶어 해당 방법을 GPT에게 물어보았더니 sticky를 사용하라고 나와있어 그대로 적용해주었다. sticky는 또 처음 써보네... sticky를 쓰는게 좋은 방법인지는 모르겠으나, 일단 GPT에서 추천해줬으니 바로 써주었다.

// index.js
export default function Home() {
  return (
    <div className="flex flex-col h-screen">
      <Header className="sticky top-0" />
      <NavBar className="sticky top-0" />
      <div className="flex-1 overflow-auto">
        <TestList testList={DUMMY_TEST} />
      </div>
    </div>
  );
}

 

전체 화면에서 스크롤바를 없애주기 위해 global.scss 파일을 다음과 같이 수정해주면 끝이다. base와 components 사이에 넣어주면 된다.

@tailwind base;

/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
  display: none;
}


@tailwind components;
@tailwind utilities;

완성! 이제 각 item 클릭 시 세부사항이 뜨도록 해야 한다.

 

참고한 글)

https://merrily-code.tistory.com/169

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

https://tailwindcss.com/docs/overflow#scrolling-if-needed

Overflow - Tailwind CSS

https://tailwindcss.com/docs/flex#flex-1

Flex - Tailwind CSS

https://stackoverflow.com/questions/75066913/how-can-i-hide-scrollble-scroll-in-tailwind

How can I hide scrollble scroll in tailwind