feat: no-scrollbar tailwind plugin

konstaui · Aug 24, 2022 · aed4e16 · aed4e16
1 parent 8f38d19
commit aed4e16
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 0 deletions.
diff --git a/src/config.js b/src/config.js
@@ -12,6 +12,7 @@ const pluginSafeAreas = require('./config/plugin-safe-areas.js');
 const pluginTranslucent = require('./config/plugin-translucent.js');
 const pluginRange = require('./config/plugin-range.js');
 const pluginTouch = require('./config/plugin-touch.js');
+const pluginNoScrollbar = require('./config/plugin-no-scrollbar.js');
 const mdColors = require('./config/md-colors.js');
 
 const content = `${path.resolve(__dirname)}/**/*.{js,jsx,vue,svelte}`;
@@ -34,6 +35,7 @@ const config = (userConfig = {}) => {
         pluginTranslucent(),
         pluginRange(),
         pluginTouch(),
+        pluginNoScrollbar(),
       ],
     },
     userConfig

diff --git a/src/config/plugin-no-scrollbar.js b/src/config/plugin-no-scrollbar.js
@@ -0,0 +1,16 @@
+const plugin = require('tailwindcss/plugin');
+
+module.exports = () =>
+  plugin(({ addUtilities }) => {
+    const noScrollbar = {
+      '.no-scrollbar': {
+        'scrollbar-width': 'none',
+      },
+      '.no-scrollbar::-webkit-scrollbar': {
+        display: 'none',
+        opacity: '0',
+      },
+    };
+
+    addUtilities(noScrollbar);
+  });