tailwind theme colors not working with daisyui

When i’m trying to use the below colors in my next app with tailwind and daisyui they don’t work but if i remove the daisyui plugin they start working for some reason.

tailwind.config.js

import type { Config } from "tailwindcss";
import daisyui from "daisyui";

const config: Config = {
  daisyui: {
    themes: ["dark"],
  },
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      backgroundImage: {
        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
        "gradient-conic":
          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
      },
      colors: {
        "primary-red": "#E84644",
        "navbar-bg": "#111111",
        "primary-bg": "#1E1E1E"
      },
    },
  },
  plugins: [daisyui],
};
export default config;

page.tsx

import Navbar from "@/Components/Navbar";

export default function Home() {
  return (
    <main className="bg-primary-red">
      <Navbar />
    </main>
  );
}

If I remove the daisyui plugin in tailwind.config.js the color class starts working but with daisyui for some reason it’s not working

>Solution :

DaisyUI may override some Tailwind default classes or apply its theme management, which can affect custom styles like colors. You need to make sure that you override DaisyUI’s default theme by adding a new theme. You can find more information on the documentation page at https://v1.daisyui.com/docs/add-themes/.

In addition, if you don’t feel like overriding the default theme, you should avoid using custom class names that have been defined in DaisyUI or TailwindCSS.