Hansanghyeon / tailwindcss-mac-scrollbar

tailwindcss로 만든 mac 스타일의 스크롤바

tailwindcss-mac-scrollbar

• npm https://www.npmjs.com/package/@hyeon/mac-scrollbar
• github https://github.com/Hansanghyeon/mac-scrollbar

preview

tailwind plugin 사용하기

해당플러그인을 적용하면 기본적으로 모든 스크롤바에 스타일이 변경된다.

npm install -D tailwindcss-mac-scrollbar

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  plugins: [
    require('tailwindcss-mac-scrollbar')
  ],
}

<div class="mac-scrollbar mac-scrollbar-x mac-scrollbar-y scrollbar-hidden">test</div>

스크롤바 사이즈 변경

<div class="[--tw-mac-scrollbar-size-w:6px]">가로</div>
<div class="[--tw-mac-scrollbar-size-h:6px]">세로</div>