Issues while trying to convert my tailwind primevue v3 app to v4

[mbaljeetsingh]

I'm trying to convert a large primevue v3 app to primevue v4.

I was following the migration guide after updating the presets. https://primevue.org/guides/migration/v4/

Most of it looks good. But, the theme is not working as expected. You can see the following example after the v4 update

In v3 👇 After v4 👇

In v3 (Dark mode) 👇

After v4 (Dark mode) 👇

Similar issue is present in the tags too.

Following is my theme object inside the tailwind.config.js

theme: {
    extend: {
      fontFamily: {
        sans: ['Inter var', ...defaultTheme.fontFamily.sans],
      },
      colors: {
        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))',

        'primary-50': 'rgb(var(--primary-50))',
        'primary-100': 'rgb(var(--primary-100))',
        'primary-200': 'rgb(var(--primary-200))',
        'primary-300': 'rgb(var(--primary-300))',
        'primary-400': 'rgb(var(--primary-400))',
        'primary-500': 'rgb(var(--primary-500))',
        'primary-600': 'rgb(var(--primary-600))',
        'primary-700': 'rgb(var(--primary-700))',
        'primary-800': 'rgb(var(--primary-800))',
        'primary-900': 'rgb(var(--primary-900))',
        'primary-950': 'rgb(var(--primary-950))',
        'surface-0': 'rgb(var(--surface-0))',
        'surface-50': 'rgb(var(--surface-50))',
        'surface-100': 'rgb(var(--surface-100))',
        'surface-200': 'rgb(var(--surface-200))',
        'surface-300': 'rgb(var(--surface-300))',
        'surface-400': 'rgb(var(--surface-400))',
        'surface-500': 'rgb(var(--surface-500))',
        'surface-600': 'rgb(var(--surface-600))',
        'surface-700': 'rgb(var(--surface-700))',
        'surface-800': 'rgb(var(--surface-800))',
        'surface-900': 'rgb(var(--surface-900))',
        'surface-950': 'rgb(var(--surface-950))',
      },
    },
  },

I also saw in the following link to install tailwindcss-primeui. I wasn't able to get it working. And is it required. https://tailwind.primevue.org/vite/

In that link, I can see the variables are defined differently with p- prefix. Let me know if i'm doing something wrong.

Thanks, Baljeet

[mbaljeetsingh]

Hi

Figured it out after installing the tailwindcss-primeui' and then updating the css variables inmain.css`

tailwind.config.js

module.exports = {
    // ...
    content: [
        "./presets/**/*.{js,vue,ts}",
        // other paths
    ],
    plugins: [require('tailwindcss-primeui')]
}

main.css

/* Primary and Surface Palettes */
:root {
    --p-primary-50: var(--p-surface-50);
    --p-primary-100: var(--p-surface-100);
    --p-primary-200: var(--p-surface-200);
    --p-primary-300: var(--p-surface-300);
    --p-primary-400: var(--p-surface-400);
    --p-primary-500: var(--p-surface-500);
    --p-primary-600: var(--p-surface-600);
    --p-primary-700: var(--p-surface-700);
    --p-primary-800: var(--p-surface-800);
    --p-primary-900: var(--p-surface-900);
    --p-primary-950: var(--p-surface-950);
    --p-surface-0: #ffffff;
    --p-surface-50: #f8fafc;
    --p-surface-100: #f1f5f9;
    --p-surface-200: #e2e8f0;
    --p-surface-300: #cbd5e1;
    --p-surface-400: #94a3b8;
    --p-surface-500: #64748b;
    --p-surface-600: #475569;
    --p-surface-700: #334155;
    --p-surface-800: #1e293b;
    --p-surface-900: #0f172a;
    --p-surface-950: #020617;
    --p-content-border-radius: 6px;
}

/* Light Mode */
:root {
    --p-primary-color: var(--p-primary-500);
    --p-primary-contrast-color: var(--p-surface-0);
    --p-primary-hover-color: var(--p-primary-600);
    --p-primary-active-color: var(--p-primary-700);
    --p-content-border-color: var(--p-surface-200);
    --p-content-hover-background: var(--p-surface-100);
    --p-content-hover-color: var(--p-surface-800);
    --p-highlight-background: var(--p-primary-50);
    --p-highlight-color: var(--p-primary-700);
    --p-highlight-focus-background: var(--p-primary-100);
    --p-highlight-focus-color: var(--p-primary-800);
    --p-text-color: var(--p-surface-700);
    --p-text-hover-color: var(--p-surface-800);
    --p-text-muted-color: var(--p-surface-500);
    --p-text-hover-muted-color: var(--p-surface-600);
}

[mbaljeetsingh]

Now, i'm facing issue with setting the dark mode highlight color.

This is my color palette for dark mode

:root[class='dark'] {
  --p-primary-50: #f4f7fa;
  --p-primary-100: #e5ecf4;
  --p-primary-200: #d1ddec;
  --p-primary-300: #b1cae0;
  --p-primary-400: #8caece;
  --p-primary-500: #789ac4;
  --p-primary-600: #5d7eb3;
  --p-primary-700: #526ca3;
  --p-primary-800: #475a86;
  --p-primary-900: #3d4c6b;
  --p-primary-950: #283043;

  ...
  --p-highlight-background: #8caece33;
  ...
}

For --p-highlight-background, I want to use --p-primary-400 with 20% opacity. Do you think it is possible somehow without creating a new variable?

Thanks