Nuxt ui Custom Color doesn't work

 tailwind.config.ts

import type { Config } from 'tailwindcss'
const designSystem = require('./tailwind.ds.js');

export default <Partial<Config>>{
  darkMode: 'class',
  theme: {
    extend: {
      colors:{
        primary: {
          DEFAULT: "#fb991c" ,
          '50': '#fff8eb',
          '100': '#feeac7',
          '200': '#fdd48a',
          '300': '#fcb74d',
          '400': '#fb991c',
          '500': '#f5780b',
          '600': '#d95506',
          '700': '#b43809',
          '800': '#922b0e',
          '900': '#78240f',
          '950': '#450f03',
        },
        secondary: {
          DEFAULT: "#50a787" ,
          '50': '#f0f9f5',
          '100': '#daf1e5',
          '200': '#b8e2cf',
          '300': '#89ccb1',
          '400': '#50a787',
          '500': '#369374',
          '600': '#26755d',
          '700': '#1e5e4c',
          '800': '#1a4b3d',
          '900': '#163e33',
          '950': '#0c221d',
        },
        gray: {
          '50': '#f7f7f7',
          '100': '#ededed',
          '200': '#dfdfdf',
          '300': '#c8c8c8',
          '400': '#a6a6a6',
          '500': '#999999',
          '600': '#888888',
          '700': '#7b7b7b',
          '800': '#676767',
          '900': '#545454',
          '950': '#363636',
      },
        black: "oklch(15.61% 0.035 22)" ,
        white: "oklch(100% 0 0)" ,
      }
}

app.config.ts

export default defineAppConfig({
    ui: {
      primary: 'primary',
      gray: 'gray',
    },
  })