next.jstailwind-cssshadcnui

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


Solution

  • 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