Documentation is not very clear.

[AVMiraga]

Description

export default defineAppConfig({
  ui: {
    colors: {
      primary: 'blue',
      neutral: 'zinc'
    }
  }
})

When configuring your theme colors, you must use either color names from the default Tailwind palette (like 'blue', 'green', etc.) or reference custom colors that you've previously defined in your CSS file.

I think it would be good to add additional information about how to define color for default configuration so referenced color will be assigned. What I mean is, imagine you define a color in CSS:

@theme static {
  --color-tory-blue: #ebf9ff;
}

then decide to override primary with that color:

export default defineAppConfig({
  ui: {
    colors: {
      primary: 'tory-blue',
    }
  }
})

it won't work. Except you just need to add -500 for light theme and -400 for dark theme.

--color-tory-blue-400: #35cbff;
--color-tory-blue-500: #07a8ff;

Additional context

Link to doc

[n0ar3]

I think there's already a description that mention about theme variables. Since it's using tailwindcss you need to declare all the color variable from --color-50 to --color-950. There are plenty of website that provide to convert your single color variable into tailwindcss color variables

[AVMiraga]

I think there's already a description that mention about theme variables. Since it's using tailwindcss you need to declare all the color variable from --color-50 to --color-950. There are plenty of website that provide to convert your single color variable into tailwindcss color variables

Well, that is why I'm telling it is not clear. I know I can define colors from 50 to 950. You can also replace --ui-primary in your main css file, without requiring to define all of the colors in the range, but in app.config.ts it should be pointed that
--color-NAME-400 for dark, --color-NAME-500 for white will be used. Clarity is the point here.

[n0ar3]

Well, that is why I'm telling it is not clear. I know I can define colors from 50 to 950. You can also replace --ui-primary in your main css file, without requiring to define all of the colors in the range, but in app.config.ts it should be pointed that --color-NAME-400 for dark, --color-NAME-500 for white will be used. Clarity is the point here.

Hmm... IDK if it's necessary to add that information in app.config.ts or not since it's already have an explanation in the documentation inside Theme page under Colors sub-section.

[Matheun]

This is indeed basic tailwind knowledge as far as defining custom colors go, so this would only clutter the docs while you instead want the be able to expect that the developer has the base knowledge of the tools/ frameworks that they are using.

[joshangehr]

I have to say I agree with @AVMiraga in that this section could be improved. The documentation states:

You can add you own dynamic color aliases in your vite.config.ts, you just have to make sure to also define them in the theme.colors option of the ui plugin:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        colors: {
          tertiary: 'indigo'
        }
      },
      theme: {
        colors: [
          'primary',
          'secondary',
          'tertiary',
          'info',
          'success',
          'warning',
          'error'
        ]
      }
    })
  ]
})

But this does not work: at least not as described.

My expectation in this scenario is that I can use Tailwind colors as aliases for design tokens by default (in this example, the indigo scheme should be available out of the box because it's palette is available on the :root):

:root {
  --color-indigo-50: lab(95.4818% .411302 -6.78529);
  --color-indigo-100: lab(91.6577% 1.04591 -12.7199);
  --color-indigo-200: lab(84.4329% 3.18977 -23.9688);
  --color-indigo-300: lab(74.0235% 8.54138 -41.6075);
  --color-indigo-400: lab(59.866% 22.4834 -64.4485);
  --color-indigo-500: lab(48.295% 38.3129 -81.9673);
  --color-indigo-600: lab(38.4009% 52.6132 -92.3857);
  --color-indigo-700: lab(32.4486% 49.2217 -84.6695);
  --color-indigo-800: lab(26.6645% 37.9804 -68.6402);
  --color-indigo-900: lab(23.3911% 24.6978 -50.4718);
  --color-indigo-950: lab(12.4853% 14.9672 -31.3418);
}

Especially because the documentation states:

When configuring your theme colors, you must use either color names from the default Tailwind palette (like 'blue', 'green', etc.) or reference custom colors that you've previously defined in your CSS file.

However, when I add this to a template:

<UButton color="tertiary">Click me</UButton>

No CSS classes that are created.

The markup in the UButton component appears to be correct (note the tertiary keyword), but the classes are not created:

<button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-tertiary hover:bg-tertiary/75 active:bg-tertiary/75 disabled:bg-tertiary aria-disabled:bg-tertiary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-tertiary"><!--v-if-->Click me<!--v-if--></button>

I feel like I am probably missing something obvious, but the point is that I still don't know what I'm doing wrong. I think the argument that this is a lack of Tailwind knowledge doesn't apply—mainly because of the way the documentation is worded.

Reproduction: https://github.com/joshangehr/nuxtui-color-extend

[Matheun]

Have you tried defining the color variables like tailwind defines it theme? This should fix your issue

@theme {
  --color-indigo-50: lab(95.4818% .411302 -6.78529);
  --color-indigo-100: lab(91.6577% 1.04591 -12.7199);
  --color-indigo-200: lab(84.4329% 3.18977 -23.9688);
  --color-indigo-300: lab(74.0235% 8.54138 -41.6075);
  --color-indigo-400: lab(59.866% 22.4834 -64.4485);
  --color-indigo-500: lab(48.295% 38.3129 -81.9673);
  --color-indigo-600: lab(38.4009% 52.6132 -92.3857);
  --color-indigo-700: lab(32.4486% 49.2217 -84.6695);
  --color-indigo-800: lab(26.6645% 37.9804 -68.6402);
  --color-indigo-900: lab(23.3911% 24.6978 -50.4718);
  --color-indigo-950: lab(12.4853% 14.9672 -31.3418);
}

[benjamincanac]

The Theme documentation has been updated in v4, I also added a warning to define shades from 50 to 950: https://ui4.nuxt.com/docs/getting-started/theme/design-system#colors