feat!: v4 support (#32)

* feat!: v4 support

* docs: enhance v4

Author: reslear

README.md

@@ -7,17 +7,19 @@
 
 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" height="500" />
+<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 v2.x, v3.x, v4.x
+🎨 Tailwind v4.x, v3.x, v2.x.
+
+📦 Zero dependencies
 
 🛠️ Port for [unocss-preset-scrollbar-hide](https://github.com/reslear/unocss-preset-scrollbar-hide)
 
-![Firefox >=64 Chrome >= 2 Safari >= 4 Internet Explorer >= 10 ](https://badges.herokuapp.com/browsers?googlechrome=2&firefox=64&safari=4&iexplore=10)
+🎯 Pure CSS implementation for v4.x
 
 ## Installation
 
@@ -27,14 +29,36 @@ Install the plugin from npm:
 # Using npm
 npm install tailwind-scrollbar-hide
 
+# Using pnpm
+pnpm add tailwind-scrollbar-hide
+
 # Using Yarn
 yarn add tailwind-scrollbar-hide
+```
 
-# Using pnpm
-pnpm add tailwind-scrollbar-hide
+### 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 'tailwind-scrollbar-hide/v4';
 ```
 
-Then add the plugin to your config file:
+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
@@ -64,16 +88,6 @@ export default {
 } satisfies Config
 ```
 
-### Tailwind v4 support
-
-[Use legacy configuration files](https://tailwindcss.com/docs/v4-beta#using-legacy-configuration-files) like:
-
-```css
-/* index.css */
-@import 'tailwindcss';
-@config "../../tailwind.config.js";
-```
-
 ## Usage
 
 Use in you template `scrollbar-hide` for visual hiding scrollbar
@@ -97,4 +111,4 @@ or restore default value use `scrollbar-default`
 
 ## License
 
-[MIT](./LICENSE)
+[MIT](./LICENSE)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "tailwind-scrollbar-hide",
-  "version": "2.0.0",
+  "version": "3.0.0",
   "description": "tailwindcss plugin for hide scrollbar",
   "keywords": [
     "tailwindcss",
@@ -23,21 +23,23 @@
     ".": {
       "types": "./dist/index.d.ts",
       "default": "./dist/index.js"
-    }
+    },
+    "./v4": "./src/styles.css"
   },
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [
-    "dist"
+    "dist",
+    "src/styles.css"
   ],
   "scripts": {
     "build": "tsc",
     "prepublishOnly": "pnpm build"
   },
   "devDependencies": {
-    "@types/node": "^22.10.2",
-    "tailwindcss": "3.4.17",
-    "typescript": "5.7.2"
+    "@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"

playground/package.json

@@ -9,12 +9,12 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@tailwindcss/vite": "4.0.0-beta.8",
+    "@tailwindcss/vite": "4.1.8",
     "tailwind-scrollbar-hide": "workspace:*",
-    "tailwindcss": "4.0.0-beta.8"
+    "tailwindcss": "4.1.8"
   },
   "devDependencies": {
-    "typescript": "5.7.2",
-    "vite": "6.0.3"
+    "typescript": "5.8.3",
+    "vite": "6.3.5"
   }
 }

playground/src/main.ts

@@ -11,9 +11,8 @@ class LoremBlock extends HTMLElement {
         <h3 class="font-bold">${this.title}</h3>
         
         <div class="p-4 mt-5 rounded-lg bg-gray-50">
-          <div class="w-full overflow-auto max-h-48 ${
-            this.hasAttribute('scroll-hide') ? 'scrollbar-hide' : ''
-          }">
+          <div class="w-full overflow-auto max-h-48 ${this.hasAttribute('scroll-hide') ? 'scrollbar-hide' : ''
+      }">
 
             <div class="space-y-10">
               <p>

playground/src/style.css

@@ -1,11 +1,5 @@
 @import 'tailwindcss';
-@config '../tailwind.config.ts';
-
-/* TODO: Temporary not working
-https://github.com/tailwindlabs/tailwindcss/discussions/13292
-@import '../node_modules/tailwind-scrollbar-hide/src/index.js'; 
-@import 'tailwind-scrollbar-hide'; 
-*/
+@import 'tailwind-scrollbar-hide/v4';
 
 body {
   @apply bg-gray-100;