Why add new color in daisy ui not working

Question

I'm trying to add new color as this article explains but my code is not working. I even copied all the code from the article but also not working.

Here is my code:

// tailwind.config.ts

const config: Config = {
  content: [
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      color: {
        acc: 'var(--acc)',
      }
    },
  },
  plugins: [require("daisyui")],
  daisyui: {
    themes: [
      {
        light: {
          "primary": "#0000ff",
          "secondary": "#ff0000",
          "--acc": '#00ff00',
          "neutral": "#3d4451",
          "base-100": "#808080",
        }
      },
      "dark"
    ],
   ... some other stuff
  },
};

// Button.tsx

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

Answer 1

Firstly, as per the article you linked, you would add the color definition to theme.extend.colors, not theme.extend.color:

const config: Config = {
  content: [
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      colors: {
        acc: 'var(--acc)',

Secondly, btn modifiers are not created for every color – you'd need to define btn-acc yourself. We can take inspiration from Daisy UI's own definitions like:

@layer components {
  .btn-acc {
    @apply text-black outline-acc;
    @supports (color: oklch(0 0 0)) {
      --btn-color: 86.64% 0.2948272403370167 142.49533888780996;
    }
    @supports not (color: oklch(0 0 0)) {
      --btn-color: var(--acc);
    }
  }
}