How to add custom gray color

[hamonCordova]

Description

I've add "brand" colors and "smoke" (our gray colors) in tawilind.config.ts. The "brand" color is showing correctly when i use "bg-primary-500" for exemple. But the gray isn't showind correctly

tailwind.config.ts

import type {Config} from 'tailwindcss'

export default <Partial<Config>>{
    theme: {
        fontFamily: {
            sans: ['"IBM Plex Sans"', 'sans-serif']
        },
        extend: {
            colors: {
                brand: {
                    50: '#F4F3FF',
                    100: '#EBE9FE',
                    200: '#D9D6FE',
                    300: '#BDB5FD',
                    400: '#9C8BFA',
                    500: '#7C5CF6',
                    600: '#6B3AED',
                    700: '#5C28D9',
                    800: '#4F22BB',
                    900: '#411D95',
                    950: '#261065'
                },
                smoke: {
                    50: '#FFFFFF',
                    100: '#D1D1D1',
                    200: '#B0B0B0',
                    300: '#888888',
                    400: '#6D6D6D',
                    500: '#5D5D5D',
                    600: '#4F4F4F',
                    700: '#454545',
                    800: '#3D3D3D',
                    900: '#242424',
                    950: '#ff0f37'
                },
            },
            height: {
                navbar: 'var(--h-navbar)',
            },
            spacing: {
                aside: 'var(--w-aside)',
            },
        }
    }
}

app.config.ts

export default defineAppConfig({
  ui: {
    primary: "brand",
    gray: "smoke",
    container: {
      base: "mx-auto",
      padding: "px-4 sm:px-6 lg:px-8",
      constrained: "sm:max-w-screen-2xl",
    },
    dropdown: {
      container: "z-50",
      background: "bg-white dark:bg-gray-700",
    },
    table: {
      default: {
        emptyState: {
          label: "Nenhum registro encontrado",
        },
        loadingState: {
          label: "Carregando...",
        },
      },
    },
    notifications: {
      position: "bottom-0 lg:top-0 lg:bottom-auto",
    },
  },
});

[noook]

Please provide a valid reproduction in your issues, for example a link to a Stackblitz. This allows us not to spend time recreating your project's configuration.

https://stackblitz.com/edit/nuxt-ui-t6d3zp

I can correctly use your gray color on this reproduction.

[hamonCordova]

I don't know why, but in my case, to "solve" this i needed to remove node_modules and package-lock.json and then run npm i. Everytime i change a color variable, it must be done.

[noook]

I believe it has something to do with Nuxt Tailwind's module. It is currently required to restart the server when editing tailwind.config.ts. This should not be required anymore when nuxt/ui will upgrade to @nuxtjs/tailwindcss 6.12