Using `primary` / `gray` as main colors might conflict with existing projects.

[codeflorist]

Description

primary, secondary, etc. is a rather popular naming scheme for tailwind-color-classes in many projects. This leads to problems when trying to add nuxt/ui to such a project, since it defines and uses primary itself. The same problem could arise with gray.

I would suggest renaming the classes to e.g. ui-primary, or make the class-name configurable.

Additional context

No response

[goela268]

I found the configuration ui does in the background very weird.

Turns out, you can not use primary and gray to name your colors in the tailwind.config.js as it will purge them out. However, if you name your color for example green (instead of primary) and cool (instead of gray), you can set this in the app.config.ts file:

export default defineAppConfig({
  ui: {
    primary: 'green',
    gray: 'cool'
  }
})

And then you are free to use bg-primary-500 again in your components and it will apply the correct color.

[benjamincanac]

The goal of this feature is to be able to change your colors dynamically through your app.config.ts. The module creates Tailwind CSS primary and gray colors as aliases with CSS variables. This way we can use text-primary or text-gray across all the config and the user can choose which primary / gray they want in their app.config.ts instead of having to rewrite the entire config.

If you name a color primary or gray the module will erase it as we need the CSS variables.

I hear it might be a conflict in some projects but we're too committed to this naming to change it in my opinion. Even in the next major (v3), I don't plan to change this.

[codeflorist]

@benjamincanac

Thanks for the explanation!

What would actually be detrimental from your side, if you used text-ui-primary instead of text-primary? What is the reason for your strict commitment to this, if i may ask?

From a workload-perspective, the change should be done pretty quickly using search and replace.

Imho this is a problem as old as CSS. It has been a long-time best practice for packages to have a specific prefix with their classes to not get into conflict with existing classes from the main project or other packages. Only now Tailwind is in the middle - but the problem is still the same.

What if other packages decide to also define their own primary colors?