Custom Animation Not Working.

[azharuddin-mulla-amla]

I have added keyframes and animation, but when I tried to applied I not working.
html:

const bstoreTailwindConfig = {
name: "bstore",
selectors: ["[data-theme='bstore']"],
extend: {
colors: {
primary: "#e11d48",
secondary: "#14b8a6",
accent: "#facc15",
background: "#000000",
foreground: "#ffffff",
},
fontSize: {
test: "5rem",
},
spacing: {
72: "18rem",
96: "24rem",
120: "30rem",
},
boxShadow: {
neon: "rgba(225, 29, 72, 0.8)",
},
textColor: {
skin: {
base: "rgb(255, 255, 255)",
muted: "rgb(254, 202, 202)",
inverted: "rgb(220, 38, 38)",
},
},
backgroundColor: {
skin: {
fill: "rgb(185, 28, 28)",
"button-accent": "rgb(255, 255, 255)",
"button-accent-hover": "rgb(254, 242, 242)",
"button-muted": "rgb(239, 68, 68)",
},
},
gradientColorStops: {
skin: {
hue: "rgb(185, 28, 28)",
},
},
keyframes: {
wave: {
"0%": { transform: "rotate(0.0deg)" },
"10%": { transform: "rotate(14deg)" },
"20%": { transform: "rotate(-8deg)" },
"30%": { transform: "rotate(14deg)" },
"40%": { transform: "rotate(-4deg)" },
"50%": { transform: "rotate(10.0deg)" },
"60%": { transform: "rotate(0.0deg)" },
"100%": { transform: "rotate(0.0deg)" },
},
},
animation: {
"waving-hand": "wave 2s linear infinite",
},
},
};