Styling PrimeVue with your favorite CSS library.
Unstyled mode consists of two solutions. First part is removal of the component specific style classes from the DOM, when unstyled setting is enabled components do not include any CSS selectors while core functionality is still available. For example, in the default styled mode, the select component adds .p-select style class to the root element and includes CSS to corresponding style. In unstyled setting, this style class is not added to the root element and the CSS is not included in the page.
The second part is custom styling as components are displayed as transparent without their styles. Pass Through Props feature is the key of since it also supports a global configuration to create themes in unstyled mode. In fact, the upcoming Tailwind theme is basically a custom pt configuration.
Unstyled mode is enabled for the whole suite by setting unstyled as true during PrimeVue installation.
import { createApp } from "vue";
import PrimeVue from "primevue/config";
const app = createApp(App);
app.use(PrimeVue, { unstyled: true });
Alternatively even in the default styled mode, a particular component can still be used as unstyled by adding the unstyled prop of the component.
<Button label="Check" icon="pi pi-check" unstyled></Button>
Here is a sample that provides a style using Tailwind CSS. Before beginning, head over to the pass through section button documentation to learn more about the components internals. We'll be using the root, label and icon elements to add a custom style.
<Button
label="Search"
icon="pi pi-search"
unstyled
pt:root="bg-teal-500 hover:bg-teal-700 active:bg-teal-900 cursor-pointer py-2 px-4 rounded-full border-0 flex gap-2"
pt:label="text-white font-bold text-lg"
pt:icon="text-white text-xl"
/>
An unstyled theme is basically a global pt configuration so that it can be defined only once from a single location, still a particular component can override a global configuration since the pt props of a component and the global setting is merged with component having higher precedencee.
import { createApp } from "vue";
import PrimeVue from "primevue/config";
const app = createApp(App);
app.use(PrimeVue, {
pt: {
button: {
root: { class: 'bg-teal-500 hover:bg-teal-700 cursor-pointer text-white p-4 rounded border-0 flex gap-2' },
label: 'text-white font-bold text-xl', // OR { class: 'text-white font-bold text-xl' }
icon: 'text-white text-2xl'
},
panel: {
header: 'bg-primary text-primary-contrast border-primary',
content: 'border-primary text-lg text-primary-700',
title: 'bg-primary text-primary-contrast text-xl',
toggler: 'bg-primary text-primary-contrast hover:text-primary hover:bg-primary-contrast'
}
}
});
Tailwind CSS is perfect fit for the unstyled mode, visit the dedicated Tailwind CSS documentation for the first-class integration.
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.
For a sample, visit the example repository.