scrollbar-hide-plugin 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 reslear
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,114 @@
+# scrollbar-hide-plugin
+
+[![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)
+![npm](https://img.shields.io/npm/dw/tailwind-scrollbar-hide)
+[![install size](https://packagephobia.com/badge?p=tailwind-scrollbar-hide)](https://packagephobia.com/result?p=tailwind-scrollbar-hide)
+
+Tailwind plugin for hide scrollbars, although the element can still be scrolled if the element's content overflows.
+
+<img src="https://user-images.githubusercontent.com/12596485/142972957-272010d3-29f6-4be7-99e1-dd03e7a8b92b.gif" alt="tailwind-scrollbar-hide animation demo" width="400" />
+
+[🕹 Live Playground](https://reslear.github.io/tailwind-scrollbar-hide/)
+
+## Features
+
+🎨 Tailwind v4.x, v3.x, v2.x.
+
+📦 Zero dependencies
+
+🛠️ Port for [unocss-preset-scrollbar-hide](https://github.com/reslear/unocss-preset-scrollbar-hide)
+
+🎯 Pure CSS implementation for v4.x
+
+## Installation
+
+Install the plugin from npm:
+
+```sh
+# Using npm
+npm install scrollbar-hide-plugin
+
+# Using pnpm
+pnpm add scrollbar-hide-plugin
+
+# Using Yarn
+yarn add scrollbar-hide-plugin
+```
+
+### Tailwind v4 support
+
+![Firefox >=64 Chrome >= 2 Safari >= 4](https://badges.herokuapp.com/browsers?googlechrome=2&firefox=64&safari=4)
+
+
+For Tailwind v4, you can use the following approach in your CSS configuration file:
+
+```css
+/* index.css */
+@import 'tailwindcss';
+@import 'scrollbar-hide-plugin/v4';
+```
+
+This will automatically import and configure the plugin for Tailwind v4. 
+
+> Note: Internet Explorer functionality has been dropped in Tailwind v4
+
+### Tailwind v2.x, v3.x support
+
+![Firefox >=64 Chrome >= 2 Safari >= 4 Internet Explorer >= 10](https://badges.herokuapp.com/browsers?googlechrome=2&firefox=64&safari=4&iexplore=10)
+
+
+For Tailwind v2.x and v3.x, add the plugin to your config file:
+
+```js
+// tailwind.config.js
+module.exports = {
+  theme: {
+    // ...
+  },
+  plugins: [
+    require('scrollbar-hide-plugin')
+    // ...
+  ]
+}
+```
+
+or [using TypeScript](https://tailwindcss.com/docs/configuration#using-esm-or-type-script):
+
+```ts
+// tailwind.config.ts
+import type { Config } from 'tailwindcss'
+import scrollbarHide from 'scrollbar-hide-plugin'
+
+export default {
+  theme: {
+    // ...
+  },
+  plugins: [scrollbarHide]
+} satisfies Config
+```
+
+## Usage
+
+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`
+
+> ⚠️ webkit overriding not working https://github.com/reslear/tailwind-scrollbar-hide/issues/19#issuecomment-1086949110 need switch breakpoint system
+
+```html
+<div class="w-4 scrollbar-hide md:scrollbar-default">...</div>
+```
+
+## Plugin Inspiration
+
+- https://github.com/tailwindlabs/tailwindcss-forms/tree/main
+- https://github.com/tailwindlabs/tailwindcss/discussions/2310#discussioncomment-8592440
+
+## License
+
+[MIT](./LICENSE)

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: () => void;
+export default _default;

package/dist/index.js

@@ -0,0 +1,29 @@
+/**
+ * Tailwind plugin for hide scrollbars, although the element can still be scrolled if the element's content overflows.
+ */
+const scrollbarHide = ({ addUtilities }) => addUtilities({
+    '.scrollbar-hide': {
+        // TODO: remove IE and Edge support
+        /* IE and Edge */
+        '-ms-overflow-style': 'none',
+        /* Firefox */
+        'scrollbar-width': 'none',
+        /* Safari and Chrome */
+        '&::-webkit-scrollbar': {
+            display: 'none'
+        }
+    },
+    '.scrollbar-default': {
+        // TODO: remove IE and Edge support
+        /* IE and Edge */
+        '-ms-overflow-style': 'auto',
+        /* Firefox */
+        'scrollbar-width': 'auto',
+        /* Safari and Chrome */
+        '&::-webkit-scrollbar': {
+            display: 'block'
+        }
+    }
+});
+// override type for v3/4 compatibility
+export default scrollbarHide;

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "scrollbar-hide-plugin",
+  "version": "1.0.0",
+  "description": "tailwindcss plugin for hide scrollbar",
+  "keywords": [
+    "tailwindcss",
+    "scrollbar",
+    "scrollbar-hide"
+  ],
+  "homepage": "https://github.com/reslear/tailwind-scrollbar-hide#readme",
+  "bugs": {
+    "url": "https://github.com/reslear/tailwind-scrollbar-hide/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/reslear/tailwind-scrollbar-hide.git"
+  },
+  "license": "MIT",
+  "author": "reslear",
+  "sideEffects": false,
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./v4": "./src/styles.css"
+  },
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "src/styles.css"
+  ],
+  "scripts": {
+  },
+  "devDependencies": {
+    "@types/node": "^22.15.28",
+    "tailwindcss": "4.1.8",
+    "typescript": "5.8.3"
+  },
+  "peerDependencies": {
+    "tailwindcss": ">=3.0.0 || >= 4.0.0 || >= 4.0.0-beta.8 || >= 4.0.0-alpha.20"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/styles.css

@@ -0,0 +1,19 @@
+@utility scrollbar-hide {
+  /* Firefox */
+  scrollbar-width: none;
+  
+  /* Safari and Chrome */
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+@utility scrollbar-default {
+  /* Firefox */
+  scrollbar-width: auto;
+  
+  /* Safari and Chrome */
+  &::-webkit-scrollbar {
+    display: block;
+  }
+}