Tailwind color issue

nuxt.config.js
import tailwindcss from "@tailwindcss/vite";
export default {
  modules: ['@pinia/nuxt', '@nuxtjs/tailwindcss'],
  test: {
    environment: 'jsdom',
    globals: true
  },
  compatibilityDate: "2024-11-01",
  devtools: { enabled: true },
  css: ['~/assets/css/main.css'],
  vite: {
    plugins: [
      tailwindcss(),
    ],
  },
}
tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./components/**/*.{js,vue,ts}",
    "./layouts/**/*.vue",
    "./pages/**/*.vue",
    "./plugins/**/*.{js,ts}",
    "./composables/**/*.{js,ts}",
    "./utils/**/*.{js,ts}",
    "./app.vue",
    "./error.vue"
  ],
  theme: {
    extend: {
      colors: {
        customBlue: '#3A5FCD',
        customGreen: '#6EE7B7',
        customPurple: '#8B5A8C',
        bronze: '#df842a',
        gold: "#facc15",
        silver: "#c0c0c0",
        lightText: "#f8fafc",
        darkText: "#1A1A1A",
        pageGray: "#F8F9FA",
        lightGray: "#94a3b8",
        cardGray: "#F5F7FA",
        lightBeige: "#fbf0ed",
        currency: "#f5b942",
      },
      fontFamily: {
        agrandir: ['Agrandir', 'system-ui', 'Avenir', 'Helvetica', 'Arial', 'sans-serif'],
        satoshi: ['Satoshi', 'system-ui', 'Avenir', 'Helvetica', 'Arial', 'sans-serif'],
      },
    },
  },
  plugins: [],
}
assets/css/main.css
@import 'tailwindcss';