Environment

• Operating System: macOS Sequoia 15.6.1
• Node Version: v24.8.0
• Nuxt Version: N/A
• CLI Version: N/A
• Nitro Version: N/A
• Package Manager: [email protected]
• Builder: -
• User Config: -
• Runtime Modules: -
• Build Modules: -
• TypeScript: ~5.8.3
• Vite: ^7.1.2

Is this bug related to Nuxt or Vue?

Vue

Package

v4.0.0-alpha.x

Version

4.0.0-alpha.1

Reproduction

https://codesandbox.io/p/devbox/frosty-resonance-6qymvl?file=%2Fvite.config.ts

Description

Related to #4809, but slightly different, so updated here.

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({
      theme: {
        colors: [
          'primary',
          'secondary',
          'tertiary',
          'info',
          'success',
          'warning',
          'error'
        ]
      },
      ui: {
        colors: {
          primary: 'blue',
          secondary: 'purple',
          tertiary: 'indigo'
        }
      }
    })
  ]
})

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>

Additionally, I still get the Typescript error:

Type '"tertiary"' is not assignable to type '"secondary" | "primary" | "success" | "info" | "warning" | "error" | "neutral" | undefined'

I have tried:

• Deleting node_modules and rebuilding
• Refreshing the vite server
• Deleting the auto-imports.d.ts and components.d.ts and rebuilding

Additional context

No response

Logs