prepare tailwind 4 support

Author: heidkaemper

README.md

@@ -13,23 +13,31 @@ Imagine you could write an Intersection Observer like a Tailwind CSS variant:
 
 ## Installation
 This package has two parts. A Tailwind CSS plugin and a tiny JavaScript snippet.<br>
-Download and install it with NPM:
+Download and install it via npm:
 ```sh
-npm install -D tailwindcss-intersect
+npm install tailwindcss-intersect
 ```
 
-### Add the plugin to your tailwind.config.js file
+### Import
+Import it just like Tailwind CSS in your CSS file:
+```css
+/* tailwind css v4.x */
+@import "tailwindcss";
+@import "tailwindcss-intersect";
+```
+
+If you are using **Tailwind CSS v3** or a JavaScript configuration file, import it like this:
 ```js
 // tailwind.config.js
 module.exports = {
-    // ...
-    plugins: [
-        require('tailwindcss-intersect')
-    ],
+  // ...
+  plugins: [
+    require('tailwindcss-intersect')
+  ],
 }
 ```
 
-### Add the necessary JavaScript snippet to your site
+### Add the necessary JavaScript snippet
 
 #### Via CDN
 You can include the CDN build of this plugin as a `<script>` tag to your site:
@@ -79,21 +87,8 @@ If you want to define the intersection behavior in a custom class (e.g. with the
 <div class="intersect custom-class"></div>
 ```
 
-## Migrate from 1.x
-If you have integrated the JavaScript snippet via NPM, change the import like this:
-```js
-// v1.x
-import Observer from 'tailwindcss-intersect';
-
-// v2.x
-import { Observer } from 'tailwindcss-intersect';
-
-Observer.start();
-```
-That's it! 🎉
-
 ---
 
-<a href="https://tailwindcss.com/"><img src="https://img.shields.io/badge/Tailwind%20CSS-3.2+-38bdf8?style=for-the-badge"></a>
-<a href="https://www.npmjs.com/package/tailwindcss-intersect"><img src="https://img.shields.io/npm/v/tailwindcss-intersect?style=for-the-badge"></a>
+<a href="https://v3.tailwindcss.com/"><img src="https://img.shields.io/badge/Tailwind%20CSS-3.2+-38bdf8?style=for-the-badge"></a>
+<a href="https://tailwindcss.com/"><img src="https://img.shields.io/badge/Tailwind%20CSS-4.0+-38bdf8?style=for-the-badge"></a>
 <a href="https://www.npmjs.com/package/tailwindcss-intersect"><img src="https://img.shields.io/npm/dt/tailwindcss-intersect?style=for-the-badge"></a>

docs/example/index.html

@@ -6,7 +6,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Example „Cards” - Tailwind CSS Intersection Observer Plugin</title>
-    <link href="styles.css" rel="stylesheet">
+    <link href="output.css" rel="stylesheet">
     <script defer src="https://unpkg.com/[email protected]/dist/observer.min.js"></script>
 </head>
 

docs/example/input.css

@@ -0,0 +1,5 @@
+@import "tailwindcss" source(none);
+
+@import "../../src/";
+
+@source "index.html"

docs/example/output.css

@@ -1,11 +1,9 @@
+import js from '@eslint/js'
 import globals from 'globals'
-import eslint from '@eslint/js'
-import tseslint from 'typescript-eslint'
 import eslintPluginJest from 'eslint-plugin-jest'
 
-export default tseslint.config(
-    eslint.configs.recommended,
-    ...tseslint.configs.recommended,
+export default [
+    js.configs.recommended,
     eslintPluginJest.configs['flat/recommended'],
     {
         languageOptions: {
@@ -19,20 +17,20 @@ export default tseslint.config(
         rules: {
             'comma-spacing': ['error', { 'before': false, 'after': true }],
             'comma-style': ['error', 'last'],
+            'eol-last': ['error', 'always'],
             'func-call-spacing': ['error', 'never'],
             'key-spacing': ['error', { 'mode': 'minimum', 'beforeColon': false, 'afterColon': true }],
             'keyword-spacing': ['error', { 'before': true, 'after': true }],
             'linebreak-style': ['error', 'unix'],
             'lines-between-class-members': ['error', 'always'],
-            'no-console': ['warn', { 'allow': ['warn'] }],
+            'no-console': ['warn', { 'allow': ['warn', 'error'] }],
             'no-empty-function': 'error',
             'no-multiple-empty-lines': ['error', { 'max': 2 }],
             'no-var': 'error',
             'quotes': ['error', 'single'],
             'semi': ['error', 'never'],
-            'svelte/no-at-html-tags': 'off',
             'space-before-blocks': ['error', 'always'],
             'space-before-function-paren': ['error', { 'named': 'never', 'anonymous': 'always', 'asyncArrow': 'always' }],
         },
-    }
-)
+    },
+]

docs/example/styles.css

@@ -19,33 +19,32 @@
     "type": "module",
     "main": "dist/index.cjs.js",
     "module": "dist/index.esm.js",
+    "style": "dist/index.css",
     "unpkg": "dist/observer.min.js",
     "types": "dist/index.d.ts",
     "files": [
         "/dist"
     ],
     "scripts": {
-        "dev": "npx tailwindcss -c ./docs/example/tailwind.config.js -o ./docs/example/styles.css",
-        "watch": "npx tailwindcss -c ./docs/example/tailwind.config.js -o ./docs/example/styles.css --watch",
-        "prod": "npx tailwindcss -c ./docs/example/tailwind.config.js -o ./docs/example/styles.css --minify",
+        "dev": "npx @tailwindcss/cli -i docs/example/input.css -o docs/example/output.css",
+        "watch": "npx @tailwindcss/cli -i docs/example/input.css -o docs/example/output.css --watch",
+        "prod": "npx @tailwindcss/cli -i docs/example/input.css -o docs/example/output.css --minify",
         "build": "node scripts/build.js && npm run prod",
         "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js --setupFilesAfterEnv '<rootDir>/jest/customMatchers.js'",
-        "lint": "npx eslint {src,jest}/**",
-        "lint:fix": "npx eslint {src,jest}/** --fix"
+        "lint": "npx eslint",
+        "lint:fix": "npx eslint --fix"
     },
     "peerDependencies": {
-        "tailwindcss": ">=3.2.0"
+        "tailwindcss": ">=3.2.0 || >=4.0.0"
     },
     "devDependencies": {
-        "@eslint/js": "^9.5.0",
-        "esbuild": "^0.21.5",
-        "eslint": "^9.5.0",
-        "eslint-plugin-jest": "^28.6.0",
-        "globals": "^15.6.0",
+        "@eslint/js": "^9.19.0",
+        "@tailwindcss/cli": "^4.0.0",
+        "esbuild": "^0.24.2",
+        "eslint": "^9.18.0",
+        "eslint-plugin-jest": "^28.11.0",
         "jest": "^29.7.0",
-        "prettier": "^2.8.8",
-        "tailwindcss": "^3.2.0",
-        "typescript": "^5.5.2",
-        "typescript-eslint": "^7.14.1"
+        "tailwindcss": "^4.0.0",
+        "typescript": "^5.7.3"
     }
 }

docs/example/tailwind.config.js

@@ -36,3 +36,10 @@ fs.copyFile('./src/index.d.ts', './dist/index.d.ts', error => {
         process.exit(1)
     }
 })
+
+fs.copyFile('./src/index.css', './dist/index.css', error => {
+    if (error) {
+        console.error(error.message)
+        process.exit(1)
+    }
+})

eslint.config.js

@@ -0,0 +1 @@
+@custom-variant intersect (&:not([no-intersect]));