Tailwind CSS Intersection Plugin

Imagine you could write an Intersection Observer like a Tailwind CSS variant:
``html



`

$3

Click here to see it in action
(View Source)

---

Installation

This package has two parts. A Tailwind CSS plugin and a tiny JavaScript snippet.

Download and install it via npm:
`sh
npm install tailwindcss-intersect
`

$3

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')
],
}
`

$3

#### Via CDN
You can include the CDN build of this plugin as a
`

#### Via NPM
Alternatively, you can add the plugin to your JavaScript bundle:
`js
import { Observer } from 'tailwindcss-intersect';

Observer.start();
`
Hot Tip: When building a SPA, it may be necessary to restart the Observer on route changes. You can call Observer.restart() to do so.

---

Usage


Use the intersect: variant in your classes like you would with every other Tailwind CSS Variant:
`html

`

Modifiers

$3

You can use intersect-once if you want to trigger the event only on the first appearance of an element.
`html

`

$3

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

`

$3

Use the intersect-full utility to trigger the event when when the element is fully visible. (threshold is set to 0.99)
`html

`

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

``

---