tailwind.css 플러그인 없이 스크롤 바 없애기

플러그인 없이 스크롤 바 없애기

일정 높이가 넘치면 overflow-scroll 속성을 줬는데 참 편하지만 늘 옆에 못생긴 스크롤바가 싫었다.
꾸며도 되지만 보이지 않는게 UI도 좋고 사용자들한테도 편하게 느껴질 것이다.

그래서 이 스크롤바를 없애주는 코드를 작성해보았다.

01.플러그인 설치

우선 나는 이 방법으로 해결되지 않았다.... 이유는 모르겠으나 플러그인 설치하는 것부터 살짝 오류문구가 나왔고 딥하게 파고들기엔 구현하기 바빠서 다른 방법으로 해결했다.
그래도 나중을 위해 플러그인 설치 방법도 남겨두려고 한다.

yarn add tailwind-scrollbar-hide

아무튼 이렇게 설치를 해준 후

//tailwind.config.js

module.exports = {
  ...
  // 추가코드
  plugins: [require("tailwind-scrollbar-hide")],
};

tailwind.config.js 에 가서 plugins에 해당 내용을 추가해준다.
(나는 여기서 require에 문제가 생겼는데 이를 지워도 똑같이 오류가 발생해서 사용하지 못했다. -> 프로젝트 끝나면 이 부분 다시 알아보도록 하기 👊🏻)

코드에 적용하기

<div className="scrollbar-hide" >
	내용입니다
</div>

설치만 잘 된다면ㅋㅋ 이 방법도 아주 간단할 듯 싶다.

02. css 로 추가하기

플러그인을 설치하기 싫거나 나처럼 오류가 뜨는 사람들이라면 이 방법을 쓰면 해결할 수 있다.

className={`overflow-scroll [&::-webkit-scrollbar]:hidden`}

코드에 적용하기

 <div className={`max-h-[20.9rem] overflow-y-auto [&::-webkit-scrollbar]:hidden`}>
  {existingFolders?.map((folder) => (
    <div key={folder} className="border-b">
      <button
        onClick={() => {
          onFolderClick(folder);
          setWarningMessage("");
        }}
        className="w-full gap-2 px-[0.63rem] text-left transition-colors hover:bg-Secondary-50 ssm:py-2 ssm:text-body-14 md:py-3 md:text-body-16"
        >
        {folder}
      </button>
    </div>
  ))}
</div>

언제 플러그인을 쓰는게 좋을까?

나처럼 딱 한 페이지? 한 두번만 쓰는 경우라면 css로 추가하는 방법이 좋을 것 같고, 위 속성을 많이 쓰는 작업이라면 플러그인을 설치해서 쓰는게 팀프로젝트에서도 효율적일 것 같다.

tailwind는 쓰면 쓸수록 배울게 많은 것 같다...ㅎㅎ