Why some of my custom colors applying and some not in tailwind (Flowbite)?

Question

I am having this weird problem where I am trying to change the background of a <Navbar> component of Flowbite(which is based on tailwind, so it doesn't matter). when I am giving it my custom as "bg-primary" it's not working but "bg-secondary" is working which is also my custom color. It's happening for some other colors as well.

My tsconfig file

/** @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",          //not working 
        darkprimary: "#BF665E",      // not working
        secondary: "#04BF9D",        //working 
        darksecondary: "#03A696",    // working
        darkgrey: "#191718",         // not working
        blueishsecondary: "#253659", // not working
      },
    },
  },
  plugins: [require("flowbite/plugin")],
};

And I am using a default Flowbite component so

<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>

Things that I tried

Restarted the server

tried changing the names of the colors

Link for the repo https://github.com/sami3ullah/amplify-basics