React JS项目Tailwind CSS自定义颜色构建后消失问题求助

问题原因 #

Tailwind CSS 在生产构建时会自动启用**树摇（Purge）**逻辑，只会将静态扫描到的完整类名打包到最终样式文件中，开发模式下该逻辑默认关闭，因此会出现开发正常、构建后样式丢失的问题。
你代码中使用了动态拼接类名的写法 bg-${props.color}，Tailwind 静态扫描时无法识别变量对应的实际值，不会将bg-primary这类完整类名纳入最终样式，因此构建后样式丢失。

解决方案 #

方案1：使用完整类名映射（最推荐） #

提前定义好颜色对应的完整Tailwind类名，避免动态拼接：

const Button = (props) => {
  // 提前定义完整类名映射，确保Tailwind可以静态扫描到
  const colorClassMap = {
    primary: 'bg-primary',
    secondary: 'bg-secondary',
    dark: 'bg-dark'
  }
  return (
    <button
      className={`rounded-lg ${props.className || ""} ${props.padding} text-sm text-white ${colorClassMap[props.color]}`}
      onClick={props.onClick}
    >
      {props.children}
    </button>
  );
};

注意：你原来代码里的props.className ? props.className : "1"是错误写法，空值应该返回空字符串，否则会给元素加无用的1类名

方案2：将用到的类名加入安全列表 #

如果不想修改组件逻辑，可以在tailwind.config.js中配置安全列表，强制Tailwind保留这些类名：

module.exports = {
  purge: {
    content: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"],
    // 加入需要保留的类名，不会被Purge删除
    safelist: ['bg-primary', 'bg-secondary', 'bg-dark']
  },
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {
      colors: {
        primary: "#C62C2C",
        secondary: "#6558f5",
        dark: "#000000",
      },
    },
    fontFamily: {
      body: ["Inter", "sans-serif"],
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

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