Tailwind Plugin for Easy Intersection Observer Integration

The Tailwind CSS Intersection Plugin bridges the gap between Tailwind’s utility classes and the Intersection Observer API.

It allows developers to apply styles or trigger animations when elements enter or leave the viewport, all using familiar Tailwind syntax.

Live Demo

GitHub Repo

Key Features

🚀 Performance: Lightweight and optimized for smooth performance.

⚙️ Customizable: Adjust the intersection threshold and create custom classes for unique behaviors.

🎨 Tailwind CSS Syntax: Control animations with familiar Tailwind CSS variants like intersect:opacity-100.

Install & Download

# NPM
$ npm install tailwindcss-intersect

Basic Usage

1. Add the plugin to your Tailwind project.

// tailwind.config.js
module.exports = {
  // ...
  plugins: [
    require('tailwindcss-intersect')
  ],
}

// Via <script />
<script defer src="/dist/observer.min.js"></script>

// Via NPM
import { Observer } from 'tailwindcss-intersect';
Observer.start();

2. Apply variants like intersect:opacity-100 to your HTML elements.

<div class="scale-50 opacity-0 intersect:scale-100 intersect:opacity-100 transition duration-700">
  <img src="https://picsum.photos/400?random=1" class="w-full h-96 object-cover bg-slate-300 rounded">
</div>

<div class="scale-50 opacity-0 intersect:scale-100 intersect:opacity-100 transition duration-700 lg:delay-200">
  <img src="https://picsum.photos/400?random=2" class="w-full h-96 object-cover bg-slate-300 rounded">
</div>

<div class="scale-50 opacity-0 intersect:scale-100 intersect:opacity-100 transition duration-700">
  <img src="https://picsum.photos/400?random=3" class="w-full h-96 object-cover bg-slate-300 rounded">
</div>

<div class="scale-50 opacity-0 intersect:scale-100 intersect:opacity-100 transition duration-700 lg:delay-200">
  <img src="https://picsum.photos/400?random=4" class="w-full h-96 object-cover bg-slate-300 rounded">
</div>

3. Utilize modifiers like ‘intersect-once’, ‘intersect-half’, or ‘intersect-full’ for fine-tuned control.

<div class="scale-50 opacity-0 intersect:scale-100 intersect:opacity-100 transition duration-700 intersect-once">
  <img src="https://picsum.photos/400?random=1" class="w-full h-96 object-cover bg-slate-300 rounded">
</div>

<div class="scale-50 opacity-0 intersect:scale-100 intersect:opacity-100 transition duration-700 lg:delay-200 intersect-half">
  <img src="https://picsum.photos/400?random=2" class="w-full h-96 object-cover bg-slate-300 rounded">
</div>

<div class="scale-50 opacity-0 intersect:scale-100 intersect:opacity-100 transition duration-700 intersect-full">
  <img src="https://picsum.photos/400?random=3" class="w-full h-96 object-cover bg-slate-300 rounded">
</div>