midudev/tailwind-animations

Installation :book:

Package install

Install the package with your favorite package manager:

• npm

npm install tailwind-animations

• pnpm

pnpm install tailwind-animations

• yarn

yarn add tailwind-animations

Agent skill (skills.sh)

Give coding agents a consumer-focused skill for this package:

npx skills add midudev/tailwind-animations

Browse: skills.sh/midudev/tailwind-animations

Plugin Implementation

Use the plugin in your Tailwind CSS project:

/* globals.css (for Tailwind CSS 4.*) */
@import 'tailwindcss';
@import 'tailwind-animations';

Usage :gear:

Example

Here are some simple examples of how to use this plugin and its animations:

Animates Timeline

This plugin also brings a utility class to animate elements based on their position in the window. You can use the class view-animate-single or view-animate-[animation] to generate any name for your timeline.

  Adipiscing enim eu turpis egestas pretium aenean pharetra magna ac. Arcu
  cursus vitae congue mauris rhoncus aenean vel. Sit amet cursus sit amet
  dictum. Augue neque gravida in fermentum et. Gravida rutrum quisque non
  tellus orci ac auctor augue mauris. Risus quis varius quam quisque id diam
  vel quam elementum. Nibh praesent tristique magna sit amet purus gravida
  quis. Duis ultricies lacus sed turpis tincidunt id aliquet. In egestas erat
  imperdiet sed euismod nisi. Eget egestas purus viverra accumsan in nisl nisi
  scelerisque. Netus et malesuada fames ac.

Contributors 👑