index.js

const plugin = require("tailwindcss/plugin");

const animationDelay = plugin(
  function ({ addUtilities, matchUtilities, theme, variants, e }) {
    const values = theme("animationDelay");
    const utilities = Object.entries(values).map(([key, value]) => {
      return {
        [`.${e(`animation-delay-${key}`)}`]: { animationDelay: `${value}` },
        [`.${e(`-animation-delay-${key}`)}`]: { animationDelay: `-${value}` },
      };
    });
    matchUtilities(
      {
        "animation-delay": (value) => ({
          animationDelay: value,
        }),
      },
      { values: theme("animationDelay") }
    );
    addUtilities(utilities, variants("animationDelay"));
  },
  {
    theme: {
      animationDelay: {
        none: "0s",
        25: "25ms",
        50: "50ms",
        75: "75ms",
        100: "100ms",
        150: "150ms",
        200: "200ms",
        300: "300ms",
        400: "400ms",
        500: "500ms",
        600: "600ms",
        700: "700ms",
        800: "800ms",
        900: "900ms",
        1000: "1000ms",
        1100: "1100ms",
        1200: "1200ms",
        1300: "1300ms",
        1400: "1400ms",
        1500: "1500ms",
        2000: "2000ms",
        3000: "3000ms",
        4000: "4000ms",
        5000: "5000ms",
        6000: "6000ms",
        7000: "7000ms",
        8000: "8000ms",
        9000: "9000ms",
      },
    },
    variants: {
      animationDelay: ["responsive", "hover"],
    },
  }
);
module.exports = animationDelay;