$ show new-data-services/tailwindcss-animated
Tailwind CSS Animated is an npm library that extends Tailwind CSS with a comprehensive set of animation utilities and 19 predefined keyframe animations. It provides utility classes for animation duration, delay, direction, iteration count, timing function, fill mode, play state, and composition, plus ready-to-use animations such as wiggle, shake, fade, flip, jump, and rotate. The package is dual-version: it ships a CSS-first implementation using Tailwind v4's @utility and @theme directives (src/utilities/*.css, src/index.css), alongside a legacy JavaScript plugin (src/compat/*.js, src/index.js) that works with Tailwind v3's plugin API. The architecture cleanly separates the v4 CSS utilities from the v3 compatibility layer, sharing a single theme definition in src/compat/theme.js.
The LLM identified 4 files worth highlighting for reuse:
Detects whether Tailwind v3 or v4 is installed and conditionally generates bare-value theme entries (__BARE_VALUE__) that enable syntax like animate-duration-1234 only on v4. Self-contained with a single dependency on tailwindcss/package.json, easily extractable, and demonstrates non-obvious skill in bridging two major versions of a plugin API.
Defines 19 predefined animations as CSS custom properties in a @theme default block, with configurable defaults via --default-animation-duration, --default-animation-delay, and --default-animation-timing-function. This is the canonical Tailwind v4 approach to plugin authoring and a reusable pattern for any animation library.
A custom Jest matcher (toContainAll) that normalizes whitespace and semicolons before asserting CSS output contains expected declarations. Solves the recurring problem of brittle CSS string assertions and is directly reusable in any PostCSS or Tailwind testing setup.
TypeScript definitions that handle the Tailwind v3/v4 PluginAPI shape mismatch via a deliberately loose handler signature, plus module augmentation to add v3-only theme keys (animationDelay, animationDuration, animationTimingFunction, animationIteration) to Tailwind's ThemeConfig. Demonstrates a clean pattern for typing plugins that must support multiple framework versions.