component colors dosent work with the custom color object syntax

[emechpi]

Environment

• Operating System: macOS
• Node Version: v20.10.0
• Nuxt Version: 3.10.0
• Nuxt UI Version: latest

Version

nuxt/ui-edge

Reproduction

I reproduce the small scale of what I want here: https://stackblitz.com/~/edit/nuxt-ui-zt8kmt

for example, I made a Button element to test it.

Description

I want to have fully customized components based on the Nuxt/UI logic.

As you can see below link: https://tailwindcss.com/docs/customizing-colors#color-object-syntax

we can define colors with custom names and I do it, but the colors don't work well in Nuxt/UI components.

Additional context

No response

Logs

No response

[benjamincanac]

If you use different color shades than 50-950, you will have to rewrite the config of all the components but also safelist all the dynamic classes (text-{color}-500).

Here is how to safelist classes https://tailwindcss.com/docs/content-configuration#safelisting-classes and as an example the default safelist we use for the components: https://github.com/nuxt/ui/blob/dev/src/runtime/utils/colors.ts#L18

[emechpi]

@benjamincanac Thanks. Does it also support the Tailwind treeshake if we don't use a class in safellist classes? If it doesn't, do you have any idea to make it possible?

[benjamincanac]

Not sure to understand what you mean, do you have an example?