not getting tailwind css colors from a function that return string of tailwind css

this is my tailwind config file

import type { Config } from "tailwindcss";

export default {
    darkMode: ["class"],
    content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
        fontSize: {
            title: '16px',
            xsmall: '12px',
            small: '14px'
        },
        fontFamily: {
            overpass: 'overpass'
        },
        colors: {
            background: 'var(--background)',
            foreground: 'var(--foreground)',
            purple2: '#644d99',
            pink2: '#DD187F',
            inactive: '#CCCCCC',
            gray2: '#828282',
            f9: '#F9F9F9',
        },
        animation: {
            'spin-slow': 'spin 3s linear infinite',
            'accordion-down': 'accordion-down 0.2s ease-out',
            'accordion-up': 'accordion-up 0.2s ease-out'
        },
        borderRadius: {
            lg: 'var(--radius)',
            md: 'calc(var(--radius) - 2px)',
            sm: 'calc(var(--radius) - 4px)'
        },
        keyframes: {
            'accordion-down': {
                from: {
                    height: '0'
                },
                to: {
                    height: 'var(--radix-accordion-content-height)'
                }
            },
            'accordion-up': {
                from: {
                    height: 'var(--radix-accordion-content-height)'
                },
                to: {
                    height: '0'
                }
            }
        }
    }
  },
    plugins: [require("tailwindcss-animate")]
} satisfies Config;

// darkMode: ['class'],

This is my functions for getting styles according to method

export const getMethodBorderColor = (method: Partial<ApiDocMethod>): string => {
  const methodBorderColors: Record<Partial<ApiDocMethod>, string> = {
    get: "border-green-400",
    post: "border-yellow-400",
    delete: "border-red-400",
    put: "border-blue-400",
    patch: "border-purple-400",
  };

  return methodBorderColors[method] || 'border-gray-400'; // Default border color
};

export const getMethodBgColor = (method: Partial<ApiDocMethod>): string => {
  const methodColors: Record<Partial<ApiDocMethod>, string> = {
    get: "bg-green-400",
    post: "bg-yellow-400",
    delete: "bg-red-400",
    put: "bg-blue-400",
    patch: "bg-purple-400",
  };

  return methodColors[method] || 'bg-black';
};

and this is how where i am calling the functions

ths is the first function

                    <AccordionItem
                      key={i}
                      value={item.method + item.path}
                      className={cn(
                        "border bg-transparent",
                        getMethodBorderColor(item.method as ApiDocMethod)
                      )}
                      // className='bg-transparent'
                    >

this is the 2nd function

                        <div>
                          <span
                            className={cn(
                              "py-1 px-2 rounded-md mr-4 text-white",
                              getMethodBgColor(item.method as ApiDocMethod)
                            )}
                          >
                            {item.method}
                          </span>{" "}
                          {item.path}
                        </div>

the functions do work like i get bg colors for get, delete, and put method and i get border colors for just delete and put

how can i fix this problem i am using next js page router shadcnui tailwindcss

Since Tailwind removes classes not in use at build time, you need to add the colors to the safelist. See Tailwind CSS, certain custom colors are not working