Tailwind already has some bulit in animation classes:
animate-spin | Rotates the element continuously. |
animate-ping | Scales the element and fades it out repeatedly. |
animate-pulse | Fades the element in and out. |
animate-bounce | Makes the element bounce up and down. |
Or you can extend your tailwind config to add custom animations:
module.exports = {
theme: {
extend: {
keyframes: {
wiggle: {
'0%, 100%': { transform: 'rotate(-3deg)' },
'50%': { transform: 'rotate(3deg)' },
},
},
animation: {
wiggle: 'wiggle 1s ease-in-out infinite',
},
},
},
};
