时间戳

首页 > 解决方案 > Tailwind Css 自定义颜色在构建时消失（React JS）

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

问题描述

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

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>

标签： reactjstailwind-csstailwind-ui

解决方案

如果您的颜色是通过props.color添加bg-到 create传递下来bg-primary的，那么这就是问题所在。

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

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

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

推荐阅读