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

Posted 2023-03-07

【中文标题】Tailwind Css 自定义颜色在构建时消失（React JS）

【英文标题】：Tailwind Css custom color disappearing on build (React JS)

【发布时间】：2021-10-24 13:32:56

【问题描述】：

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

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>

【问题讨论】：

您的构建版本中是否存在所有其他样式？

【参考方案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

【讨论】：

嗨，如果我们希望颜色是动态的怎么办？我们是否应该在其他地方提及所需的类来欺骗“清除”以忽略它们？

编辑上述评论：它确实有效，但不确定这是一个好习惯。有什么想法吗？

我建议传递完整的类名 - 可能是 props.colorClass - 或使用字典对象（颜色名作为属性，类名作为值，以便您可以查找适当的值) 而不是简单地在别处添加类名。 （为了清晰和易于维护。）