I had the idea of incorporating an animation into my website design using tailwind.css for styling.
module.exports = {
content: ["./index.html", "./src/**/*.{js,jsx}"],
theme: {
colors: {
primary: "#E51114",
secondary: "#434242",
lightGray: "#CCCCCC",
dimmedWhite: "#F5F5F5",
white: "#FFFFFF",
},
extend: {
keyframes: {
slideInOut: {
"0%": { transform: "translateX(calc(100% + 30px)" },
"10%": { transform: "translateX(0)" },
"90%": { transform: "translateX(0)" },
"100%": { transform: "translateX(calc(100% + 30px)" },
},
},
// INITIATE
animation: {
slideInOut: "slideInOut 5s ease-in-out",
},
// FINISH
},
},
plugins: [],
};
However, I encountered an issue when extending the theme in tailwind.config.cjs by adding the "animation" property. Deleting just three lines resolves the problem and everything functions as expected.
The problematic output: https://i.sstatic.net/KObVK.png