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

[atakantepe]

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