我想为我的网站创建一个动画。我使用tailwind.css的样式。

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: [],
};

每当我在tailwind.config.cjs中通过添加“animation”属性来扩展主题时，问题就会出现。如果我只删除这3行，一切都会正常。
我得到的输出（问题）：