I wanted to create an animation for my website. I use 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)" },
        },
      },
      // START
      animation: {
        slideInOut: "slideInOut 5s ease-in-out",
      },
      // END
    },
  },
  plugins: [],
};

Whenever I extend theme in tailwind.config.cjs by adding "animation" property the problem occurs. If I delete just these 3 lines everything behaves normal.

The output I get (the problem):

CodePudding user response：

You are missing closing parentheses in your keyframes values, so when you add in the animation configuration, it also adds the @keyframes definition and breaks the rest of the CSS. Try the following modification:

slideInOut: {
  "0%": { transform: "translateX(calc(100%   30px))" },
  "10%": { transform: "translateX(0)" },
  "90%": { transform: "translateX(0)" },
  "100%": { transform: "translateX(calc(100%   30px))" },
},