Setting up PrimeVue Unstyled and Tailwind CSS presets in a Vite project.
The prerequisite steps are covered by the Install Tailwind CSS with Vite guide. If you have Vite and Tailwind configured successfully, follow the next steps.
PrimeVue is available for download on npm registry.
# Using npm
npm install primevue
# Using yarn
yarn add primevue
# Using pnpm
pnpm add primevue
PrimeVue needs to be configured as a Vue plugin with unstyled mode enabled.
import { createApp } from 'vue';
import PrimeVue from 'primevue/config';
const app = createApp(App);
app.use(PrimeVue, {
unstyled: true
});
Download a release from github, alternatively you may use Preset Builder to dynamically build your release file with the components you need as the pre-build release package contains all the available components. Once the zip is downloaded, extract the contents to a folder of your choice e.g. ./src/presets and then configure the pt property of PrimeVue to the main preset file.
import { createApp } from 'vue';
import PrimeVue from 'primevue/config';
import Lara from '@/presets/lara'; //import preset
const app = createApp(App);
app.use(PrimeVue, {
unstyled: true,
pt: Lara //apply preset
});
The built-in presets utilize an extended color palette based on CSS variables that needs to be defined as a Tailwind theme config extension
export default {
...
theme: {
extend: {
colors: {
'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))'
}
}
}
...
}
Final step is defining the default values for the colors in RGB format, this can be done in a global CSS file in your Vite application e.g. src/assets/base.css.
:root {
--primary-50: 236 253 245;
--primary-100: 209 250 229;
--primary-200: 167 243 208;
--primary-300: 110 231 183;
--primary-400: 52 211 153;
--primary-500: 16 185 129;
--primary-600: 5 150 105;
--primary-700: 4 120 87;
--primary-800: 6 95 70;
--primary-900: 4 78 56;
--primary-950: 2 44 34;
--surface-0: 255 255 255;
--surface-50: 248 250 252;
--surface-100: 241 245 249;
--surface-200: 226 232 240;
--surface-300: 203 213 225;
--surface-400: 148 163 184;
--surface-500: 100 116 139;
--surface-600: 71 85 105;
--surface-700: 45 55 72;
--surface-800: 30 41 59;
--surface-900: 15 23 42;
--surface-950: 3 6 23;
}
Visit the vite-unstyled-tailwind project as an example.