Tailwind viewer and color setup

[v-moravec]

Hey, I tried looking into older issues and can't figure it out from them.

I want to set custom primary color. I tried it like this:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [],
  theme: {
    extend: {
      colors: {
        'jagu-orange': {
          50: '#F89815FF',
          100: '#F89815FF',
          200: '#F89815FF',
          300: '#F89815FF',
          400: '#F89815FF',
          500: '#F89815FF',
          600: '#F89815FF',
          700: '#F89815FF',
          800: '#F89815FF',
          900: '#F89815FF',
          950: '#F89815FF',
          DEFAULT: '#F89815FF'
        }
      }
    },
  },
  plugins: [],
}

That didn't work. In css variables I see:

    --color-primary-50: null;
    --color-primary-100: null;
    --color-primary-200: null;
    --color-primary-300: null;
    --color-primary-400: null;
    --color-primary-500: null;
    --color-primary-600: null;
    --color-primary-700: null;
    --color-primary-800: null;
    --color-primary-900: null;
    --color-primary-950: null;
    --color-primary-DEFAULT: null;

How can I achieve this?

Also I can't access http://localhost:3000/_tailwind/ even when setting it in nuxt.config.ts to true, is it possible somehow or would you have to add this feature?

[vernaillen]

Did you define in app.config.ts that your primary is jagu-orange?

export default defineAppConfig({
  ui: {
    primary: 'jagu-orange'
  }
})

[v-moravec]

Yes - it results into nulls anyway, maybe it has to do something with colors being injected at build time (not sure if it works that way), but using for example 'bg-jagu-orange' works on other elements.

[benjamincanac]

First of all, you need to remove the alpha from your hex codes: #F89815FF -> #F89815, we automatically convert the colors to RGB to have css variables compatible with alpha opacity. You can read more about it here https://tailwindcss.com/docs/customizing-colors#using-css-variables

And second, why are you defining a color palette where all the shades are the same? The components won't behave well with this.

[v-moravec]

Weird, I tried it before without the alpha channel and it didn't work, so I added it. Now I tried it in completely new project and it works.

Color palette was the same, because I was just trying it out - I was getting null on every shade, so I just tried adding same color to every one of them. Now I have specified it in detail and changed the shades.