		@@ -1,1 +0,1 @@
		(()=>{var n={start(){if(document.readyState!=="complete"){document.addEventListener("DOMContentLoaded",this.observe);return}this.observe()},observe(){document.querySelectorAll('[class=" intersect:"],[class=":intersect:"],[class^="intersect:"],[class="intersect"],[class*=" intersect "],[class^="intersect "],[class$=" intersect"]').forEach(e=>{let t=new IntersectionObserver(r=>{r.forEach(c=>{if(!c.isIntersecting){e.setAttribute("no-intersect","");return}e.removeAttribute("no-intersect"),e.classList.contains("intersect-once")&&t.disconnect()})});t.observe(e)})}},s=n;s.start();})();
		(()=>{var i={start(){if(document.readyState!=="complete"){document.addEventListener("DOMContentLoaded",()=>this.observe());return}this.observe()},observe(){let e=['[class=" intersect:"]','[class=":intersect:"]','[class^="intersect:"]','[class="intersect"]','[class*=" intersect "]','[class^="intersect "]','[class$=" intersect"]'];document.querySelectorAll(e.join(",")).forEach(t=>{let s=new IntersectionObserver(c=>{c.forEach(n=>{if(!n.isIntersecting){t.setAttribute("no-intersect","");return}t.removeAttribute("no-intersect"),t.classList.contains("intersect-once")&&s.disconnect()})},{threshold:this.getThreshold(t)});s.observe(t)})},getThreshold(e){return e.classList.contains("intersect-full")?.99:e.classList.contains("intersect-half")?.5:0}},r=i;r.start();})();

package.json

		@@ -19,5 +19,7 @@ {
		],
		"main": "dist/plugin.js",
		"module": "dist/observer.esm.js",
		"type": "module",
		"main": "dist/index.cjs.js",
		"module": "dist/index.esm.js",
		"unpkg": "dist/observer.min.js",
		"types": "dist/index.d.ts",
		"files": [
		@@ -31,17 +33,22 @@ "/dist"
		"build": "node scripts/build.js && npm run prod",
		"test": "jest --setupFilesAfterEnv '<rootDir>/jest/customMatchers.js'",
		"eslint": "npx eslint src/**",
		"eslint:fix": "npx eslint src/** --fix"
		"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"
		},
		"peerDependencies": {
		"tailwindcss": ">=3.0.0"
		"tailwindcss": ">=3.2.0"
		},
		"devDependencies": {
		"esbuild": "^0.17",
		"eslint": "^8.41",
		"jest": "^29.5",
		"prettier": "^2.8",
		"tailwindcss": "^3.0"
		"@eslint/js": "^9.5.0",
		"esbuild": "^0.21.5",
		"eslint": "^9.5.0",
		"eslint-plugin-jest": "^28.6.0",
		"globals": "^15.6.0",
		"jest": "^29.7.0",
		"prettier": "^2.8.8",
		"tailwindcss": "^3.2.0",
		"typescript": "^5.5.2",
		"typescript-eslint": "^7.14.1"
		},
		"version": "1.0.5"
		"version": "2.0.0"
		}

README.md

		@@ -37,3 +37,3 @@ # Tailwind CSS Intersection Plugin
		```html
		<script defer src="https://unpkg.com/tailwindcss-intersect@1.x.x/dist/observer.min.js"></script>
		<script defer src="https://unpkg.com/tailwindcss-intersect@2.x.x/dist/observer.min.js"></script>
		```
		@@ -44,3 +44,3 @@
		```js
		import Observer from 'tailwindcss-intersect';
		import { Observer } from 'tailwindcss-intersect';

		@@ -58,3 +58,5 @@ Observer.start();

		### The once utility
		## Modifiers

		### intersect-once
		You can use `intersect-once` if you want to trigger the event only on the first appearance of an element.
		@@ -65,3 +67,15 @@ ```html

		### Custom classes
		### intersect-half
		Use the `intersect-half` utility to trigger the event when at least half of the element is visible. (threshold is set to 0.5)
		```html
		<div class="intersect:animate-spin intersect-half"></div>
		```

		### intersect-full
		Use the `intersect-full` utility to trigger the event when when the element is fully visible. (threshold is set to 0.99)
		```html
		<div class="intersect:animate-spin intersect-full"></div>
		```

		## Custom classes
		If you want to define the intersection behavior in a custom class (e.g. with the @apply directive), add a `intersect` class to your HTML element.
		@@ -72,6 +86,19 @@ ```html

		## 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+-38bdf8?style=for-the-badge"></a>
		<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://www.npmjs.com/package/tailwindcss-intersect"><img src="https://img.shields.io/npm/dt/tailwindcss-intersect?style=for-the-badge"></a>

dist/observer.esm.js

dist/plugin.js

tailwindcss-intersect - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics

Worsened metrics