Extend colors not work after update to v3.1

[icarusion]

Environment

• Operating System: Darwin
• Node Version: v22.11.0
• Nuxt Version: 3.16.2
• CLI Version: 3.25.0
• Nitro Version: 2.11.9
• Package Manager: [email protected]
• Builder: -
• User Config: devtools, modules, runtimeConfig, app, css, ui, icon, i18n, future, compatibilityDate
• Runtime Modules: @nuxt/[email protected], @nuxt/[email protected], @nuxtjs/[email protected], @nuxtjs/[email protected], @pinia/[email protected], @vueuse/[email protected], [email protected]
• Build Modules: -

Is this bug related to Nuxt or Vue?

Nuxt

Version

v3.1.0

Reproduction

https://codesandbox.io/p/devbox/vigorous-cerf-pnrc3g

// app.config.ts
export default defineAppConfig({
ui: {
colors: {
primary: 'emerald',
neutral: 'zinc',
red: 'red',
orange: 'orange',
yellow: 'yellow',
green: 'green',
blue: 'blue',
purple: 'purple',
gray: 'gray',
},
}
}

// nuxt.config.ts

ui: {
theme: {
colors: [ 'primary', 'secondary', 'success', 'info', 'warning', 'error', 'red', 'orange', 'yellow', 'green', 'blue', 'purple', 'gray' ],
},
},

Description

Yesterday everything was working fine, no code was changed, after the upgrade it broke.
For example:

<div class="bg-(--ui-orange)">

Or

<div class="bg-orange">

Both not work

Additional context

No response

Logs

[benjamincanac]

Your bug report is not 100% accurate, the CSS variables like bg-(--ui-orange) work as expected so you should have no issue when upgrading from 3.0.2 to 3.1.0.

However, there was an issue with the new utilities when colors are defined with the same name as Tailwind CSS default colors.