Component variables (i.e. --p-card-background) not defined on load.

[jpelfrey1021]

I have a vue project built with Vite that has both primevue v4.0.0-beta.5 and tailwind v3.4.4 setup. (also have tailwindcss-primeui v0.3.1 and "primevue/themes v4.0.0-beta.5).

My setup for the theme is below. I have a button component & in the css I am trying to set it's background-color to be var(--p-card-background); I would expect on-load it to show the background color of #FFFFFF, however on-load the inspector says --p-card-background is not defined. Only after I interact with the button does it update to the correct color & show the variable as defined. It seems this is the case even if I do not try to customize the color via the preset.

app.use(PrimeVue, {
theme: {
    preset: definePreset(Lara, {
      semantic: ...,
      components: {
        card: {
          colorScheme: {
            light: {
              root: {
                background: '#FFFFFF'
              }
            },
            dark: {
              root: {
                background: '#141F29'
              }
            }
          }
        },
        ...
    }),
    options: {
      darkModeSelector: '.dark-mode',
      cssLayer: {
        name: 'primevue',
        order: 'tailwind-base, primevue, tailwind-utilities'
      }
    }
  }
});