UnoCSS

To get started, UnoCSS should already be available in your application, if not visit the UnoCSS documentation for the installation in various environments. Theming of PrimeVue components with UnoCSS is mainly achieved with unstyled mode either using global setting or for a particular component only. Visit the unstyled mode documentation for more information.

UnoCSS adds the utilities on demand so it needs to be aware of PrimeVue components path otherwise the classes used will not be included in the page, sample below configures UnoCSS with Vite. For other environments like Nuxt, visit the integrations documentation.

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import UnoCSS from 'unocss/vite'
import presetUno from '@unocss/preset-uno'
import presetAttributify from '@unocss/preset-attributify'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), UnoCSS({
    presets: [
      presetUno(),
      presetAttributify()
    ],
    include: ["./index.html",
      "./src/**/*.{vue,js,ts,jsx,tsx}",
      "./node_modules/primevue/**/*.{vue,js,ts,jsx,tsx}"]
  })]
})

An example to demonstrate how to use the default preset of UnoCSS to style the panel component via a global pass through configuration.