i’m building a React Website with theme changing through DaisyUI. I’ve defined several Themes and the logic for switching between themes works for the bg-base-100 etc classes fine. As soon as i give a container or etc a bg-primary class, the tailwind original theme class gets used because it overrides the DaisyUI Class with !important

This is my tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [require("daisyui")],
  daisyui: {
    themes: [
      {
        theme1: {
          primary: "#ff6f61",
          secondary: "#6b5b95",
          accent: "#88b04b",
          neutral: "#3d4451",
          "base-100": "#ffffff",
          info: "#2094f3",
          success: "#009485",
          warning: "#ff9900",
          error: "#ff5724",
        },
        theme2: {
          primary: "#ffcc5c",
          secondary: "#ff6f69",
          accent: "#88d8b0",
          neutral: "#333333",
          "base-100": "#f0e7db",
          info: "#2094f3",
          success: "#009485",
          warning: "#ff9900",
          error: "#ff5724",
        },
        theme3: {
          primary: "#284b63",
          secondary: "#4a7c59",
          accent: "#d9bf77",
          neutral: "#3c6e71",
          "base-100": "#d1e8e2",
          info: "#2094f3",
          success: "#009485",
          warning: "#ff9900",
          error: "#ff5724",
        },
        // More here
      },
    ],
  },
};

This doesn’t work:
bg-primary outputs default Tailwind Theme Blue
this works:
bg-base-100 outputting the color depending on which theme is selected

bg-primary should give back the Value defined in the corresponding template