귀찮은건 딱-질색4(스크롤 가려줘 custom plugin!)

스크롤 기능은 필요한데 스크롤바는 보기싫어

우리는 모바일 뷰를 기준으로 하고 있기 때문에 스크롤바가 뜨는게 어색하다!

스크롤 기능은 사용하면서 스크롤을 보이지 않게 하기 위해서는 브라우저별 설정이 필요하다

{
  /* Firefox */
  'scrollbar-width': 'none',
  /* IE */
  '-ms-overflow-style': 'none',
  /* Safari and Chrome */
  '&::-webkit-scrollbar': {
    display: 'none',
  },
}

하지만 숨기고 싶은 요소마다 이거를 넣어주기 너무 귀찮았다… 그러던 중 카카오 기술블로그에서 봤던 내용이 생각났고 도입해봤다!

바로 tailwincss/plugin을 사용해서 커스텀 플러그인을 만드는 것이다!!

tailwincss/plugin의기능은 plugin함수를 통해서 tailwind 유틸리티를 추가하는 것이다.

plugin(function ({ addUtilities }) {
      addUtilities({
        '.scrollbar-hide': {
          'scrollbar-width': 'none',
          '-ms-overflow-style': 'none',
          '&::-webkit-scrollbar': {
            display: 'none',
          },
        },
      });
    }),

이렇게 tailwind유틸리티를 만들어주고

tailwind.config.ts의 plugins에 추가해주면

// tailwind.config.ts
...
plugins: [
    require('tailwindcss-animate'),
    plugin(function ({ addUtilities }) {
      addUtilities({
        '.scrollbar-hide': {
          'scrollbar-width': 'none',
          '-ms-overflow-style': 'none',
          '&::-webkit-scrollbar': {
            display: 'none',
          },
        },
      });
    }),
  ],

스크롤 바를 없애고 싶은 곳에서 다른 유틸리티처럼 scrollbar-hide로 사용할 수 있다.

// layout.tsx
...
	<main className="max-h-[calc(100vh-50px)] min-h-[calc(100vh-50px)] overflow-y-auto px-20pxr scrollbar-hide">
    {children}
  </main>
...

---

참고

카카오가 tailwindcss 쓰는 법