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