在DaisyUI中添加自定义颜色无效，寻求解决方法

错误点分析 #

1. Tailwind 配置拼写错误：theme.extend 下的属性是 colors（复数），你写成了单数 color，导致自定义颜色未被Tailwind正确识别。
2. DaisyUI 颜色定义方式错误：不需要手动声明CSS变量（--acc），直接在DaisyUI主题对象中添加颜色键值对即可，DaisyUI会自动生成对应的组件类（如btn-acc）。

修正后的代码 #

tailwind.config.ts

// tailwind.config.ts
const config: Config = {
  content: [
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      // 修正为复数 colors
      colors: {
        acc: 'var(--acc)',
      }
    },
  },
  plugins: [require("daisyui")],
  daisyui: {
    themes: [
      {
        light: {
          "primary": "#0000ff",
          "secondary": "#ff0000",
          // 直接添加颜色键值对，无需CSS变量前缀
          "acc": '#00ff00',
          "neutral": "#3d4451",
          "base-100": "#808080",
        }
      },
      "dark"
    ],
    // ... 其他配置
  },
};

Button.tsx

// Button.tsx
<button className={'btn btn-acc'}>Label</button>

补充说明 #

• 修正配置后，重启你的开发服务器，确保Tailwind重新生成样式。
• DaisyUI会根据你在主题中定义的颜色键（如acc）自动生成对应的工具类和组件类，包括btn-acc、text-acc、bg-acc等。

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