ability to use custom classes

heidkaemper · Feb 14, 2023 · f4fc2bd · f4fc2bd
1 parent 82cba02
commit f4fc2bd
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 3 deletions.
diff --git a/README.md b/README.md
@@ -58,3 +58,9 @@ You can use `intersect-once` if you want to trigger the event only on the first
 ```html
 <div class="intersect:animate-spin intersect-once"></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.
+```html
+<div class="intersect custom-class"></div>
+```
diff --git a/docs/examples/styles.css b/docs/examples/styles.css
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "tailwindcss-intersect",
-    "version": "1.0.3",
+    "version": "1.0.4",
     "description": "Tailwind CSS with Intersection Observer variants",
     "author": "Lars Heidkämper",
     "license": "MIT",

diff --git a/src/observer.js b/src/observer.js
@@ -10,7 +10,7 @@ const Observer = {
     },
 
     observe() {
-        const elements = document.querySelectorAll('[class*=" intersect:"],[class*=":intersect:"],[class^="intersect:"]');
+        const elements = document.querySelectorAll('[class*=" intersect:"],[class*=":intersect:"],[class^="intersect:"],[class="intersect"],[class*=" intersect "],[class^="intersect "],[class$=" intersect"]');
 
         elements.forEach(element => {
             let observer = new IntersectionObserver(entries => {