Can't properly change 'primary' color in app.config.ts

[ChamperNet]

Environment

• Node version: 18.20.2
• Yarn version: 1.22.22
• OS: Windows 10

Version

^2.16.0

Reproduction

app.config.ts:

export default defineAppConfig({
  ui: {
    primary: 'primary', // I'm pushed to use copy named 'main' instead of my 'primary' color
    gray: 'cool',
  },
})

tailwind.config.ts

module.exports = {
   mode: 'jit',
...
    theme: {
      colors: {
        transparent: 'transparent',
        primary: {
          900: '#242B3D',
          800: '#2D3B57',
          700: '#334464',
          600: '#3B4E6F',
          DEFAULT: '#425577',
          500: '#425577',
          400: '#5D6D88',
          300: '#79879C',
          200: '#9DA8B9',
          100: '#C3CAD5',
          50: '#E7EAED',
        },
        main: {
          900: '#242B3D',
          800: '#2D3B57',
          700: '#334464',
          600: '#3B4E6F',
          DEFAULT: '#425577',
          500: '#425577',
          400: '#5D6D88',
          300: '#79879C',
          200: '#9DA8B9',
          100: '#C3CAD5',
          50: '#E7EAED',
        }
    }
...
}

Description

I needed to set my 'primary' color from Tailwind as Primary for nuxt/ui components.
The string must be exactly 'primary', because I am getting it from the backend as props for buttons, etc.

Additional context

No response

Logs

No response

[benjamincanac]

Nuxt UI already creates a primary color with CSS variables so you can change it at runtime with your app.config.ts, this means you can't name your color primary in your tailwind.config.ts. You need to rename it to whatever you want, like mycolor and then use this color as:

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

You can read more about this here: https://ui.nuxt.com/getting-started/theming#colors