Primary severity not being applied to any element after upgrading to `0.9.0` or `0.9.1`

[mbaljeetsingh]

Hi @atakantepe

The primary styles are not being applied Here is the example using button. I have see the same in the confirmDialog

Same is true with the code snippets

[atkntepe]

Hi, the tailwind.config and the css variables have also been changed. You can see it in the Vite or Nuxt docs. Did you update these?

https://tailwind.primevue.org/vite/#tailwind-config https://tailwind.primevue.org/vite/#css-variables

[mbaljeetsingh]

Isn't it still same, my base css file is following

@tailwind base;
@tailwind components;
@tailwind utilities;

/* Initial Values */
:root {
  font-family: 'Inter var', sans-serif;
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
  font-variation-settings: normal;
  --font-family: 'Inter var', sans-serif;
  --font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
  --primary-50: 230 236 242;
  --primary-100: 205 216 229;
  --primary-200: 155 176 203;
  --primary-300: 105 137 176;
  --primary-400: 70 99 134;
  --primary-500: 44 62 84;
  --primary-600: 39 55 74;
  --primary-700: 33 47 64;
  --primary-800: 28 40 54;
  --primary-900: 23 32 44;
  --primary-950: 20 29 39;

  --surface-0: 255 255 255;
  --surface-50: 250 250 250;
  --surface-100: 244 244 245;
  --surface-200: 228 228 231;
  --surface-300: 212 212 216;
  --surface-400: 161 161 170;
  --surface-500: 113 113 122;
  --surface-600: 82 82 91;
  --surface-700: 63 63 70;
  --surface-800: 39 39 42;
  --surface-900: 24 24 27;
  --surface-950: 18 18 19;
}

:root {
  --body-bg: rgb(var(--surface-100));
  --body-text-color: rgb(var(--surface-900));
}

:root[class='dark'] {
  --body-bg: rgb(var(--surface-900));
  --body-text-color: rgb(var(--surface-50));
}

html {
  font-size: 13px;
  overflow-x: hidden;
}

body {
  background-color: var(--body-bg);
  font-weight: normal;
  color: var(--body-text-color);
}

It looks like only the primary color is not being applied. Here, in the following screenshot you can see, background is bg-primary-500 and now it is only showing as bg-primary in the inspect

[mbaljeetsingh]

I think i need to do this

primary: 'rgb(var(--primary))', 'primary-inverse': 'rgb(var(--primary-inverse))', 'primary-hover': 'rgb(var(--primary-hover))', 'primary-active-color': 'rgb(var(--primary-active-color))',

            'primary-highlight': 'rgb(var(--primary)/var(--primary-highlight-opacity))',
            'primary-highlight-inverse': 'rgb(var(--primary-highlight-inverse))',
            'primary-highlight-hover': 'rgb(var(--primary)/var(--primary-highlight-hover-opacity))',
            
        I'll try and let you know. Thanks

[jaspertey]

I am also having issues with *-primary having no effect. Explicitly specifying the level (e.g.,*-primary-500) will work, but *-primary alone does not apply the default, despite it existing as a css variable, as well as in tailwind config.

[robinsonryan]

I'm late to the party on this one, but I was having the same issue. I think the docs for https://tailwind.primevue.org/vite/ are incomplete. I added an additional config as describe here https://tailwind.primevue.org/vite/#css-variables and it solved the issue for me. For anyone having this issue, this was my final config:

//tailwind.config.js
import primeui from 'tailwindcss-primeui'

/** @type {import('tailwindcss').Config} */
export default {
  // other settings
  theme: {
    extend: {
      options: {
        cssLayer: {
          name: 'primevue', //any name you want. will be referenced on app.css
          order: 'tailwind-base, primeui, tailwind-utilities'
        }
      },
      borderRadius: {
        DEFAULT: 'var(--p-content-border-radius)',
      },
    },
  },
  darkMode: ['class', '.app-dark'],
  plugins: [forms, primeui],
  //other settings
}

/*app.css*/
@layer tailwind-base, primeVue, tailwind-utilities;

@layer tailwind-base {
    @tailwind base;
}

@layer tailwind-utilities {
    @tailwind components;
    @tailwind utilities;
}

[atkntepe]

I'll check the docs and will update them 👍