Theming PrimeVue with Tailwind CSS 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
Configure PrimeVue plugin with theme set as none, this option disables the default design token based theming.
import { createApp } from 'vue';
import PrimeVue from 'primevue/config';
const app = createApp(App);
app.use(PrimeVue, {
theme: 'none'
});
Download a release from github that matches your PrimeVue version. The minimum version requirement is v4.1.1. Once the zip is downloaded, extract the contents to a folder e.g. ./src/assets/primevue .
- src
- assets
- primevue
- common.css
- button.css
- ...
The tailwindcss-primeui is an official plugin by PrimeTek to provide first class integration between a Prime UI library like PrimeVue and Tailwind CSS. It is designed to work both in styled and unstyled modes.
npm i tailwindcss-primeui
Configure Tailwind to use the plugin.
module.exports = {
// ...
plugins: [require('tailwindcss-primeui')]
}
The postcss-import plugin manages organization of multiple CSS files at build time. Begin with downloading the plugin.
npm install -D postcss-import
Add it as the first plugin at your PostCSS configuration.
// postcss.config.js
module.exports = {
plugins: {
'postcss-import': {},
tailwindcss: {},
autoprefixer: {},
}
}
Instead of the @tailwind directive, import the styles from node_modules.
/* Don't use @tailwind */
@tailwind base;
@tailwind components;
@tailwind utilities;
Add PrimeVue styles between the components and utilities.
/* Use @import */
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "./primevue/tailwind.css";
@import "tailwindcss/utilities";
Final step is defining the default values for the CSS variables utilized by the tailwindcss-primeui, this can be done in a global CSS file in your Vite application e.g. src/assets/base.css.
With a future update of the primeui tailwind plugin, this step will be done implicitly.
/* Primary and Surface Palettes */
:root {
--p-primary-50: #ecfdf5;
--p-primary-100: #d1fae5;
--p-primary-200: #a7f3d0;
--p-primary-300: #6ee7b7;
--p-primary-400: #34d399;
--p-primary-500: #10b981;
--p-primary-600: #059669;
--p-primary-700: #047857;
--p-primary-800: #065f46;
--p-primary-900: #064e3b;
--p-primary-950: #022c22;
--p-surface-0: #ffffff;
--p-surface-50: #fafafa;
--p-surface-100: #f4f4f5;
--p-surface-200: #e4e4e7;
--p-surface-300: #d4d4d8;
--p-surface-400: #a1a1aa;
--p-surface-500: #71717a;
--p-surface-600: #52525b;
--p-surface-700: #3f3f46;
--p-surface-800: #27272a;
--p-surface-900: #18181b;
--p-surface-950: #09090b;
--p-content-border-radius: 6px;
}
/* Light */
: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);
}
/*
* Dark Mode
* Defaults to system, change the selector to match the darkMode in tailwind.config.
* For example;
* darkMode: ['selector', '[class*="app-dark"]']
* should be;
* :root[class="app-dark"] {
*/
@media (prefers-color-scheme: dark) {
:root {
--p-primary-color: var(--p-primary-400);
--p-primary-contrast-color: var(--p-surface-900);
--p-primary-hover-color: var(--p-primary-300);
--p-primary-active-color: var(--p-primary-200);
--p-content-border-color: var(--p-surface-700);
--p-content-hover-background: var(--p-surface-800);
--p-content-hover-color: var(--p-surface-0);
--p-highlight-background: color-mix(in srgb, var(--p-primary-400), transparent 84%);
--p-highlight-color: rgba(255, 255, 255, 0.87);
--p-highlight-focus-background: color-mix(in srgb, var(--p-primary-400), transparent 76%);
--p-highlight-focus-color: rgba(255, 255, 255, 0.87);
--p-text-color: var(--p-surface-0);
--p-text-hover-color: var(--p-surface-0);
--p-text-muted-color: var(--p-surface-400);
--p-text-hover-muted-color: var(--p-surface-300);
}
}
Visit the vite-unstyled-tailwind project as an example.