[tailwindcss] NextJS & tailwindcss 에서 스크롤바 커스텀[간략 정리]

tailwindcss 에서는 별도로 스크롤 바를 꾸밀 수 있는 유틸 클래스를 제공하지 않는다. 다만, NextJs 의 global.css 에서 별도로 스크롤바에 스타일을 적용할 수 있다. 

global.css

현재 불필요한 스타일 지정을 제거하고, global.css 파일을 살펴본다면 다음 형태와 같을 지도 모른다.

@tailwind base;
@tailwind components;
@tailwind utilities;

/* 생략 */

 

 

 위 옵션을 건드리지 말고, 다음과 같이 하단에 ::-webkit-scrollbar-*  를 지정하면 스크롤바를 커스텀 할 수 있다.

/* 스크롤바 넓이 지정 */
::-webkit-scrollbar {
  width: 5px;
}

/* 스크롤바 트랙 꾸미기 */
::-webkit-scrollbar-track {
  background: #888;
  border-radius: 5px;
}

/* 스크롤바 손잡이 꾸미기 */
::-webkit-scrollbar-thumb {
  background: #000;
  border-radius: 5px;
}

/* 스크롤바 손잡이 호버 시 색 */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}