Tailwind Css 自定义颜色在构建时消失（React JS）

Question

我的自定义颜色“主要”在构建模式下不起作用并消失了。但在开发模式下它存在。

tailwind.config.js

module.exports = {
  purge: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {
      colors: {
        primary: "#C62C2C",
        secondary: "#6558f5",
        dark: "#000000",
      },
    },
    fontFamily: {
      body: ["Inter", "sans-serif"],
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

按钮组件

const Button = (props) => {
  return (
    <button
      className={`rounded-lg ${props.className ? props.className : "1"} ${
        props.padding
      } text-sm text-white bg-${props.color}`}
      onClick={props.onClick}
    >
      {props.children}
    </button>
  );
};

调用按钮组件

 <Button color="primary" padding="px-6 py-2"></Button>

Answer 1

如果您的颜色通过props.color 传递到bg- 以创建bg-primary，那么这就是问题所在。

Tailwind 在生产中的清除功能会查找类的全文并删除它没有找到的类。因为文本是在代码中组装的，所以它在任何地方都找不到bg-primary，也不包括在它构建的 CSS 中。

最简单的解决方案可能是传递完整的类名，而不仅仅是 props.color 中的颜色部分（即 bg-primary 而不仅仅是 primary）。

有关更多信息，请参阅文档：https://v2.tailwindcss.com/docs/optimizing-for-production#writing-purgeable-html