Theming PrimeVue with Tailwind CSS in a Nuxt project.
You may either choose to install the @nuxtjs/tailwindcss module or install Tailwind CSS manually; the prerequisite steps are covered by their guides. If you have Nuxt and Tailwind configured successfully, follow the next steps.
PrimeVue is available for download on npm registry. For this setup, we'll also use the @primevue/nuxt-module module.
# Using npm
npm install primevue
npm install --save-dev @primevue/nuxt-module
# Using yarn
yarn add primevue
yarn add --dev @primevue/nuxt-module
# Using pnpm
pnpm add primevue
pnpm add -D @primevue/nuxt-module
In your nuxt-config file, add the @primevue/nuxt-module module and configure PrimeVue plugin with theme set as none, this option disables the default design token based theming..
export default defineNuxtConfig({
modules: [
'@primevue/nuxt-module'
],
primevue: {
options: {
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 colors in RGB format, this can be done in a global CSS file in your Nuxt application. See the styling section at Nuxt documentation for more information.
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 nuxt-unstyled-tailwind project as an example.