Tailwind-inview NPM

Tailwind InView 🌟

Tailwind InView is a powerful utility that integrates seamlessly with Tailwind CSS, enabling you to apply styles conditionally when an element is in the viewport. Simply prefix your style classes with inview: to activate them only when the element becomes visible on the screen.

Features ✨

Easy Integration: Works out of the box with Tailwind CSS.
Performance: Uses Intersection Observer API for optimal performance.
Flexibility: Apply any Tailwind CSS class conditionally on element's visibility.

Installation 🚀

Install the package using npm:

npm i tailwind-inview

Usage 🛠️

To get started, add the plugin in your project's tailwind.config.js/ts

import inviewPlugin from 'tailwind-inview';

// ...
plugins: [..., inviewPlugin]
//...

Then import the InviewSensor from the tailwind-inview package and use it within your React components.

import React, { useEffect } from "react";
import { InviewSensor } from "tailwind-inview";

const Component = () => {
  useEffect(inViewSensor, []);

  return (
    <h1 className="inview:animate-bounce repeat-1">Animated On Scroll Text</h1>
  );
};

export default Component;