I am currently working on an animation for a gradient background. I have set up the animation and keyframes in my Tailwind configuration file.
These animations are located inside theme->extend. I have verified that they are configured correctly because when I tested the code by adding opacity within the keyframe, it worked as expected. However, when I tried to add the background-position attribute, the animations did not work. My config file looks like the following:
const colors = require("tailwindcss/colors");
module.exports = {
content: ["./public/**/*.html", "./src/**/*.{js,ts,jsx,tsx}"],
theme: {
extend: {
animation: {
mainLoading: "mainLoading 1s ease infinite",
},
keyframes: {
mainLoading: {
"0%": {
"background-position": "0% 0%",
},
"50%": {
"background-position": "100% 0%",
},
"100%": {
"background-position": "0% 0%",
},
},
},
},
colors: {
transparent: "transparent",
},
},
plugins: [],
prefix: "tw-",
};
I am using the above animation in the following way in my JavaScript file:
<div className="tw-absolute tw-top-0 tw-left-0 tw-w-full tw-h-full tw-flex tw-flex-col tw-text-center tw-justify-center tw-z-20 tw-bg-gradient-to-r tw-from-white tw-via-gray-300 tw-bg-size-200 tw-animate-mainLoading>