Flowbite（基于Tailwind）自定义颜色部分生效部分失效问题

修改Flowbite（基于Tailwind CSS）的<Navbar>组件背景色时，自定义颜色类bg-primary无法生效，但同为自定义颜色的bg-secondary却能正常作用，其他如darkprimary、darkgrey等自定义颜色也存在类似失效情况。

Tailwind配置文件 #

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
    "node_modules/flowbite-react/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    fontFamily: {
      sans: ["Graphik", "sans-serif"],
    },
    extend: {
      colors: {
        primary: "#F28157",          // 不生效
        darkprimary: "#BF665E",      // 不生效
        secondary: "#04BF9D",        // 生效
        darksecondary: "#03A696",    // 生效
        darkgrey: "#191718",         // 不生效
        blueishsecondary: "#253659", // 不生效
      },
    },
  },
  plugins: [require("flowbite/plugin")],
};

组件使用示例 #

<Navbar fluid={true} rounded={true} className="bg-secondary">
      <Navbar.Brand href="/">
        <span className="self-center text-xl font-semibold whitespace-nowrap dark:text-white">
          Prognosus
        </span>
      </Navbar.Brand>
      <div className="flex md:order-2">
        <Dropdown
          className="bg-darkgrey"
          arrowIcon={false}
          inline={true}
          label={
            <Avatar
              alt="User settings"
              img="https://flowbite.com/docs/images/people/profile-picture-5.jpg"
              rounded={true}
            />
          }
        >
          <Dropdown.Header>
            <span className="block text-sm">Bonnie secondary</span>
            <span className="block text-sm font-medium truncate">
              name@flowbite.com
            </span>
          </Dropdown.Header>
          <Dropdown.Item>Dashboard</Dropdown.Item>
          <Dropdown.Item>Settings</Dropdown.Item>
          <Dropdown.Item>Earnings</Dropdown.Item>
          <Dropdown.Divider />
          <Dropdown.Item>Sign out</Dropdown.Item>
        </Dropdown>
        <Navbar.Toggle />
      </div>
      <Navbar.Collapse>
        <Navbar.Link href="/navbars" active={true}>
          Home
        </Navbar.Link>
        <Navbar.Link href="/navbars">About</Navbar.Link>
        <Navbar.Link href="/navbars">Services</Navbar.Link>
        <Navbar.Link href="/navbars">Pricing</Navbar.Link>
        <Navbar.Link href="/navbars">Contact</Navbar.Link>
      </Navbar.Collapse>
    </Navbar>

已尝试的解决方法 #

• 重启开发服务器
• 修改自定义颜色的名称

问题原因与解决办法 #

核心原因 #

Flowbite插件默认会注入自身的颜色系统，其中primary是它的核心预设颜色变量，会直接覆盖你在theme.extend中定义的同名颜色；而secondary未被插件默认配置覆盖，所以你的自定义值能正常生效。

解决办法 #

1. 在Flowbite插件配置中重定义颜色
   修改Tailwind配置，通过Flowbite插件的配置项覆盖它的默认颜色，确保自定义颜色优先级更高：

   plugins: [
     require("flowbite/plugin")({
       theme: {
         colors: {
           primary: "#F28157",
           darkprimary: "#BF665E",
           darkgrey: "#191718",
           blueishsecondary: "#253659",
           secondary: "#04BF9D",
           darksecondary: "#03A696",
         }
       }
     })
   ]
   

2. 给自定义颜色添加命名前缀
   避免和Flowbite内置变量冲突，给自定义颜色加专属前缀，比如my-：

   extend: {
     colors: {
       'my-primary': "#F28157",
       'my-darkprimary': "#BF665E",
       'my-darkgrey': "#191718",
       'my-blueishsecondary': "#253659",
     }
   }
   

   之后在组件中使用bg-my-primary这类类名即可。

3. 清理Tailwind缓存并重新构建
   执行命令清理缓存并强制重新生成样式：

   npx tailwindcss-cli@latest build -o ./src/styles/tailwind.css --purge './src/**/*.{js,jsx,ts,tsx}'
   

   完成后重启开发服务器。

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