在Tailwind.css中扩展主题时应用布局崩溃的原因排查

我用Tailwind CSS开发网站样式，想加个滑入滑出动画，但每次在tailwind.config.cjs的theme.extend里添加animation配置后，页面布局就直接崩了——删掉那三行动画配置代码，布局又能恢复正常。

我的tailwind.config.cjs配置如下：

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

布局崩溃效果如下：

问题原因 #

你写的keyframes里存在语法错误：0%和100%的transform属性中，calc(100% + 30px)都缺少闭合的右括号。CSS语法错误会导致整个样式规则失效，甚至干扰后续样式解析，最终引发布局崩溃。

修复后的配置 #

给calc表达式补上右括号即可：

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))" }, // 补上右括号
        },
      },
      animation: {
        slideInOut: "slideInOut 5s ease-in-out",
      },
    },
  },
  plugins: [],
};

内容的提问来源于stack exchange，提问作者MoDrazzz