extend tailwind colors with tw config not working as intended

[yulafezmesi]

Environment

Operating System: Linux

• Node Version: v18.18.0
• Nuxt Version: 3.8.0
• CLI Version: 3.9.1
• Nitro Version: 2.7.2
• Package Manager: npm@9.4.2
• Builder: -
• User Config: modules
• Runtime Modules: @nuxt/ui@2.10.0
• Build Modules: -

Version

v2.11.1

Reproduction

https://stackblitz.com/edit/nuxt-ui-nycftv

Description

the Nuxt application can't recognize my custom tailwind colors and any other configs. you can find the replication links below. i believe it should be zero config however is there any custom config that i can register my custom config?

here is working example from play.tailwind

https://play.tailwindcss.com/Q6zWX0tLQV

Additional context

No response

Logs

No response

[benjamincanac]

You've specified in your app.config.ts that the gray will be cool. You have to override the cool color.

https://ui.nuxt.com/getting-started/theming#configuration

[yulafezmesi]

You've specified in your app.config.ts that the gray will be cool. You have to override the cool color.

https://ui.nuxt.com/getting-started/theming#configuration

if i try to override cool instead of gray on the tw config, the result is the same. i feel like i'm missing something.

[benjamincanac]

It might be easier to give a custom name to your gray color and use this name in your app.config.ts. Specifically for the cool, we rename it from gray because we create a gray color that uses CSS variables so it can be changed at runtime. Also, note that you need to define all the shades for your colors, otherwise they won't work for the components.

[yulafezmesi]

okay. that means i can't override tailwind's gray.950 color and i should create brand new name our gray palette. is that corrent?

ps: i can't even create gray.960 color.

[benjamincanac]

You can't define a primary or gray color in your tailwind.config.ts as @nuxt/ui create them but with CSS variables: https://github.com/nuxt/ui/blob/dev/src/module.ts#L118. The variables used in those two colors will link to the color you defined in your app.config.ts.

[yulafezmesi]

ah i see. the gray is alocated by the UI module i can't override or change them.

primary would be okay because there are no equality of the config from tailwind but the "gray" exist on the tailwind colors palletes. i believe the naming convesion might be a different rather than "gray".

[benjamincanac]

This is why we rename the default Tailwind CSS gray color to cool: https://github.com/nuxt/ui/blob/dev/src/module.ts#L112

[yulafezmesi]

forgive me, i have still confusing. i've tried to override "cool" with defining 50-950 colors. still does not working.

https://stackblitz.com/edit/nuxt-ui-nycftv?file=tailwind.config.ts,app.config.ts,app.vue

[champ7champ]

same problem) reassignment in app.config.ts does not work

[benjamincanac]

Have you tried using another name than cool as I suggested above?

[champ7champ]

Have you tried using another name than cool as I suggested above?

And it is not used rounded-xl

But

work)

[benjamincanac]

Can you share a StackBlitz reproduction? If you look at the landing template for example, you can see that this works: https://github.com/nuxt-ui-pro/landing/blob/main/app.config.ts#L14

https://nuxt-ui-pro-template-landing.vercel.app/

[champ7champ]

Can you share a StackBlitz reproduction? If you look at the landing template for example, you can see that this works: https://github.com/nuxt-ui-pro/landing/blob/main/app.config.ts#L14

https://nuxt-ui-pro-template-landing.vercel.app/

:DDD

I really don't understand

what could conflict???

[benjamincanac]

@yulafezmesi Did you manage to solve your issue?

[yulafezmesi]

no @benjamincanac , still having. i'm able resolve only change gray to gri.

also, custom primary colors are not working.

[benjamincanac]

@yulafezmesi Could you provide another StackBlitz with your current setup?

[yulafezmesi]

@yulafezmesi Could you provide another StackBlitz with your current setup?

sure, here @benjamincanac

https://stackblitz.com/edit/nuxt-ui-5tjzyz?file=app.config.ts,app.vue,tailwind.config.ts,package.json

[benjamincanac]

In your example you didn't define an hex color for the 500 shade of your mavi color (you put red), this won't work as it's using RGB inside the CSS variables.

[benjamincanac]

@yulafezmesi Can we close this?