Skip to content

Tailwind CSS with Intersection Observer variants

License

Notifications You must be signed in to change notification settings

heidkaemper/tailwindcss-intersect

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

46 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Tailwind CSS Intersection Plugin

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

<div class="opacity-0 intersect:opacity-100 transition-opacity"></div>

Demo

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 with NPM:

npm install -D tailwindcss-intersect

Add the plugin to your tailwind.config.js file

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

Add the necessary JavaScript snippet to your site

Via CDN

You can include the CDN build of this plugin as a <script> tag to your site:

<script defer src="https://unpkg.com/tailwindcss-intersect@2.x.x/dist/observer.min.js"></script>

Via NPM

Alternatively, you can add the plugin to your JavaScript bundle:

import { Observer } from 'tailwindcss-intersect';

Observer.start();

Usage

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

<div class="bg-cyan-500 intersect:bg-indigo-600 transition-colors"></div>

Modifiers

intersect-once

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

<div class="intersect:animate-spin intersect-once"></div>

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)

<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)

<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.

<div class="intersect custom-class"></div>

Migrate from 1.x

If you have integrated the JavaScript snippet via NPM, change the import like this:

// v1.x
import Observer from 'tailwindcss-intersect';

// v2.x
import { Observer } from 'tailwindcss-intersect';

Observer.start();

That's it! 🎉