tailwindcss-mac-scrollbar - npm Package Compare versions

Comparing version 1.0.5 to 1.1.0

index.js

 const plugin = require("tailwindcss/plugin")
 
 module.exports = plugin(
-	({ addComponents, addBase }) => {
+	({ addComponents, addBase, matchUtilities, theme }) => {
     // 베이스스타일로 추가하기
@@ -14,18 +14,2 @@ addBase({
       },
-      '*': {
-        // 이 속성은 넣어야하는지 넣지 말아야하는지 고민중
-        boxSizing: 'border-box',
-        '&::-webkit-scrollbar': {
-          backgroundColor: 'transparent',
-          width: 'var(--tw-mac-scrollbar-size-w, 6.4px)',
-          height: 'var(--tw-mac-scrollbar-size-h, 6.4px)'
-        },
-        '&::-webkit-scrollbar-track': {
-          backgroundColor: 'rgba(var(--tw-mac-scrollbar-bg), 0.6)',
-        },
-        '&::-webkit-scrollbar-thumb': {
-          backgroundColor: 'rgba(var(--tw-mac-scrollbar-text), 0.6)',
-          borderRadius: '999px'
-        }
-      },
       '@media (prefers-color-scheme: dark)': {
@@ -39,10 +23,27 @@ ':root': {
 
-    // TODO:
-    // mac-scrollbar-[color]
-    // 추가할수있게 변경하기
+    // 전역 스크롤바 스타일 유틸리티
     addComponents({
+      '.mac-scrollbar-all': {
+        '*': {
+          '&::-webkit-scrollbar': {
+            width: 'var(--tw-mac-scrollbar-size-w, 6.4px)',
+            height: 'var(--tw-mac-scrollbar-size-h, 6.4px)',
+            backgroundColor: 'transparent',
+          },
+          '&::-webkit-scrollbar, &::-webkit-scrollbar-thumb': {
+            overflow: 'visible',
+            borderRadius: '4px',
+          },
+          '&::-webkit-scrollbar-thumb': {
+            backgroundColor: 'rgba(var(--tw-mac-scrollbar-text), 0.6)',
+          },
+        }
+      },
+      
+      // 기본 mac-scrollbar 클래스
       '.mac-scrollbar': {
         '&::-webkit-scrollbar': {
           width: 'var(--tw-mac-scrollbar-size-w, 6.4px)',
-          height: 'var(--tw-mac-scrollbar-size-h, 6.4px)'
+          height: 'var(--tw-mac-scrollbar-size-h, 6.4px)',
+          backgroundColor: 'transparent',
         },
@@ -130,4 +131,20 @@ '&::-webkit-scrollbar, &::-webkit-scrollbar-thumb': {
     })
+
+    // 색상 유틸리티
+    matchUtilities(
+      {
+        'mac-scrollbar': (value) => ({
+          '--tw-mac-scrollbar-color': value,
+          '&::-webkit-scrollbar-thumb': {
+            backgroundColor: `var(--tw-mac-scrollbar-color, rgba(0,0,0,.1))`,
+          },
+        }),
+      },
+      {
+        values: theme('colors'),
+        type: ['color', 'any'],
+      }
+    );
 	},
 	{},
 )

package.json

 {
   "name": "tailwindcss-mac-scrollbar",
-  "version": "1.0.5",
+  "version": "1.1.0",
   "repository": "https://github.com/Hansanghyeon/tailwindcss-mac-scrollbar",
@@ -5,0 +5,0 @@ "author": "Hansanghyeon <[e-mail]>",

README.md

@@ -33,2 +33,8 @@ # tailwindcss-mac-scrollbar
 
+## 스크롤바 사이즈 변경
+
+```html
+<div class="[--tw-mac-scrollbar-size-w:6px]">가로</div>
+<div class="[--tw-mac-scrollbar-size-h:6px]">세로</div>
+```
 <!--
@@ -35,0 +41,0 @@ ## 제작하면서 참고

No alert changes

Improved metrics

Total package byte prevSize

6078

10.25%

Lines of code

141

11.9%

Number of lines in readme file

45

15.38%

No dependency changes