tailwind animations plugin

tailwind.config.ts

/**
 * Generates tailwindcss-animate compatible animation utilities from the keyframes defined in theme.keyframes.
 *
 * @see [tailwindcss-animate](https://github.com/jamiebuilds/tailwindcss-animate)
 */
const generateAnimationUtilitiesFromKeyframes = plugin(({ addUtilities, theme }) => {
  function generateAnimationUtilities(keyframes) {
    const animationUtilities = {};

    Object.entries(keyframes).forEach(([animationName, animationKeyframes]) => {
      const animationCss = {};

      Object.entries(animationKeyframes).forEach(([keyframe, styles]) => {
        animationCss[keyframe] = styles;
      });

      animationUtilities[`@keyframes ${animationName}`] = animationCss;
      animationUtilities[`.animate-${animationName}`] = {
        animationName: animationName,
        animationDuration: 'theme("animationDuration.DEFAULT")',
        transitionTimingFunction: 'theme("transitionTimingFunction.DEFAULT")',
      };
    });

    return animationUtilities;
  }

  addUtilities(generateAnimationUtilities(theme('keyframes')));
});