Merge pull request #14 from reslear/feat/scrollbar-default

feat: add `scrollbar-default` default state
reslear · Oct 16, 2021 · 150e5e7 · 150e5e7
2 parents 3edffd4 + 4667684
commit 150e5e7
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 3 deletions.
diff --git a/README.md b/README.md
@@ -2,8 +2,7 @@
 
 [![npm](https://img.shields.io/npm/v/tailwind-scrollbar-hide)](https://www.npmjs.com/package/tailwind-scrollbar-hide)
 ![npm](https://img.shields.io/npm/dt/tailwind-scrollbar-hide)
-
-tailwindcss plugin hide scrollbar
+![Dependents (via libraries.io)](https://img.shields.io/librariesio/dependents/npm/tailwind-scrollbar-hide)
 
 [Demo](https://reslear.github.io/packages/tailwind-scroll-hide/index.html)
 
@@ -17,6 +16,9 @@ npm install tailwind-scrollbar-hide
 
 # Using Yarn
 yarn add tailwind-scrollbar-hide
+
+# Using pnpm
+pnpm add tailwind-scrollbar-hide
 ```
 
 Then add the plugin to your `tailwind.config.js` file:
@@ -41,3 +43,9 @@ Use in you template `scrollbar-hide` for visual hiding scrollbar
 ```html
 <div class="w-4 scrollbar-hide">...</div>
 ```
+
+or restore default value use `scrollbar-default`
+
+```html
+<div class="w-4 scrollbar-hide md:scrollbar-default">...</div>
+```
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "tailwind-scrollbar-hide",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "tailwindcss plugin for hide scrollbar",
   "main": "src/index.js",
   "scripts": {

diff --git a/src/index.js b/src/index.js
@@ -10,6 +10,15 @@ const scrollbarHide = plugin(function ({ addUtilities }) {
       '&::-webkit-scrollbar': {
         display: 'none'
       }
+    },
+    'scrollbar-default': {
+      /* Firefox */
+      'scrollbar-width': 'auto',
+
+      /* Safari and Chrome */
+      '&::-webkit-scrollbar': {
+        display: 'block'
+      }
     }
   })
 })