Tailwind colors with CSS variables results in broken primary/gray palette

[aautcq]

Environment

• Operating System: Linux
• Node Version: v18.20.3
• Nuxt Version: 3.12.1
• CLI Version: 3.12.0
• Nitro Version: 2.9.6
• Package Manager: [email protected]
• Builder: -
• User Config: modules
• Runtime Modules: @nuxt/[email protected]
• Build Modules: -

Version

v2.17.0

Reproduction

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

Description

When using CSS variables with tailwind, NuxtUI fails to generate the corresponding primary or gray color palette.

For example (see reproduction for more details):

// tailwind.config.ts
import type { Config } from 'tailwindcss';

export default <Partial<Config>>{
  theme: {
    extend: {
      colors: {
        foo: {
          50: 'rgb(var(--color-foo-50) / <alpha-value>)',
          100: 'rgb(var(--color-foo-100) / <alpha-value>)',
          ...
        },
      },
    },
  },
};

In the main CSS file:

@layer base {
  :root {
    --color-foo-50: 240 253 253;
    --color-foo-100: 191 239 242;
    ...
  }
}

In app.config.ts:

export default defineAppConfig({
  ui: {
    primary: 'foo',
  },
});

And the resulting styles injected in the root is:

:root {
    --color-primary-50: null;
    --color-primary-100: null;
    ...
}

Additional context

This, I believe, is due to the colors plugin which expects the tailwind config to contain HEX codes only, and attempts to convert them to RGB data using the hexToRgb utility function. I'll submit a PR soon to attempt to fix this.

Logs

No response

[benjamincanac]

What is it you're trying to achieve? This is exactly what the primary color is for already:

• ui/src/runtime/utils/colors.ts

  Line 237 in 4fd1be2

  globalColors.primary = theme.extend.colors.primary = {

• ui/src/runtime/plugins/colors.ts

  Line 22 in 4fd1be2

  ${Object.entries(primary || colors.green).map(([key, value]) => `--color-primary-${key}: ${hexToRgb(value)};`).join('\n')}

[aautcq]

Sorry if I wasn't very clear :)

Let’s say I have a color palette that is dynamic and I need to fetch it from my backend. I want to use this palette as NuxtUI's primary color and also for other stylings in my app. I guess I could simply work with the tailwind primary color generated by NuxtUI, and override the values of the CSS variables in the root after having fetched the palette, like so:

const palette = await fetchPaletteFromBackend() // { 50: '240 253 253', 100: '191 239 242', ...}

// Some formatting
const rootVariables = Object.entries(palette).reduce((acc, [key, value]) => {
  return acc + `--color-primary-${key}: ${value};`
}, '')

// Override the root
useHead({ style: `:root {${rootVariables}}` })

This works just fine, but I see a few catches here:

• I'd have to use the primary or gray colors generated by NuxtUI to write styles throughout my app, which does not feel as a very good practice. If there is a breaking change and the colors names change, or if I want to switch to another components library, this will increase the amount of work I have to do. In general, I'd prefer to use the ui setting in the app.config.ts file to link the primary and gray colors to another color that sits in my tailwind config and never use primary or gray directly in my app
• There is no mention of the primary color in the colors section of my app's tailwind config, nor in my app.config.ts file. Any newcomer to my codebase would need to know that NuxtUI adds the primary color to tailwind
• My root remains polluted with the original values from the default green color (see screenshot below, where the 1st set of variables comes from my snippet, and the 2nd corresponds to the tailwind green)

For all these reasons, it would feel cleaner to me if I could use a tailwind color palette that is written using CSS variables as NuxtUI's primary color.

Please let me know if I'm missing some other obvious way to achieve this. I'm still new to Nuxt, I might just be embarrassing myself here 🌝

Also, the above is just an example, and there is already an open issue regarding this precise use case. But there might be some other cases where I would need to use CSS variables with tailwind, e.g., if I want to use something like Radix colors and need to change the value of a color depending if I'm in light or dark mode.

The real question is: how should NuxtUI handle the case where a palette generated using CSS variables is used as the primary or gray color?

If we the answer is "use HEX codes only", then it might be worth raising an error in the colors plugin when something other than a HEX code palette is provided, and also maybe mention it in the docs?

[github-actions]

This issue is stale because it has been open for 30 days with no activity.

[develth]

I just got here, because my primary & gray colors are empty, too.
Fresh install & i´m Using hex colors. As soon as i remove @nuxt/uifrom nuxt.config.ts modules section, it works.

tailwind config:

import type { Config } from 'tailwindcss'

export default <Partial<Config>>{
  theme: {
    fontFamily: {
      sans: ['Outfit', 'sans-serif', 'ui-sans-serif', 'system-ui'],
      primary: ['Outfit', 'sans-serif'],
    },
    extend: {
      colors: {
        gray: {
          50: '#949698',
          100: '#7e8083',
          200: '#696b6f',
          300: '#53565a',
          400: '#3e4146',
          DEFAULT: '#282C31',
          500: '#282C31',
          600: '#24282c',
          700: '#202327',
          800: '#1c1f22',
          900: '#181a1d',
          950: '#141619',
        },
        blue: {
          50: '#728598',
          100: '#728598',
          300: '#5e7389',
          400: '#4a627b',
          DEFAULT: '#36506C',
          500: '#36506C',
          600: '#314861',
          700: '#2b4056',
          800: '#203041',
          900: '#1b2836',
          950: '#16202b',
        },
      }
    }
  }
}

[benjamincanac]

@develth This is the normal behavior, Nuxt UI uses a primary and gray colors with CSS variables.

It's normal for them to not show up in the Tailwind CSS preview as the variable doesn't exist there

You can read more about this on https://ui.nuxt.com/getting-started/theming

[develth]

thanks for explanation @benjamincanac - got it & it worked.