Setting Up PrimeVue with Auto Imports and Tailwind v4 in Vitepress

I recently enhanced my Vitepress blog with PrimeVue components and Tailwind CSS v4. This combination provides beautiful UI components with the flexibility of utility-first CSS. Here’s how I set it up.

Why This Combination?

• PrimeVue: Offers a comprehensive set of polished Vue components
• Auto Imports: Eliminates the need to manually import each component
• Tailwind v4: The latest version with improved performance and new features
• Vitepress: Fast, simple, and powerful static site generator

Installation Steps

1. Installing the Dependencies

First, I installed all the necessary packages:

pnpm add primevue @primevue/auto-import-resolver unplugin-vue-components
pnpm add tailwindcss @tailwindcss/vite
pnpm add @primeuix/themes

The package.json now includes these dependencies:

"dependencies": {
  "@primeuix/themes": "^1.0.0",
  "@tailwindcss/vite": "^4.0.12",
  "primevue": "^4.3.1",
  "tailwindcss": "^4.0.12",
  "vue": "^3.5.13"
},
"devDependencies": {
  "@primevue/auto-import-resolver": "^4.3.1",
  "unplugin-vue-components": "^28.4.1",
  "vitepress": "^1.6.3"
}

2. Configuring Vite

I created a vite.config.js file in the docs directory to set up the plugins:

import Components from 'unplugin-vue-components/vite'
import { PrimeVueResolver } from '@primevue/auto-import-resolver'
import tailwindcss from '@tailwindcss/vite'

export default {
  plugins: [
    Components({
      include: [/\.vue$/, /\.md$/],
      resolvers: [PrimeVueResolver()],
    }),
    tailwindcss(),
  ],
}

This configuration:

• Sets up auto-imports for PrimeVue components
• Includes both Vue and Markdown files for component resolution
• Adds the Tailwind CSS plugin

3. Setting Up Tailwind CSS

For Tailwind v4, I created a CSS file at docs/.vitepress/theme/tailwind.v4-0.css:

@layer theme, base, components, utilities;
/* @import "tailwindcss/theme.css" layer(theme); */
/* @import "tailwindcss/preflight.css" layer(base); */
@import "tailwindcss/utilities.css" layer(utilities);

I’m only importing the utilities layer to avoid conflicts with Vitepress’s default styling. This approach gives me access to Tailwind’s utility classes without affecting the base styles.

4. Integrating with Vitepress Theme

In docs/.vitepress/theme/index.js, I integrated both PrimeVue and Tailwind:

// https://vitepress.dev/guide/custom-theme
import { h } from 'vue'
import DefaultTheme from 'vitepress/theme'
import './style.css'
import PrimeVue from 'primevue/config'
import Aura from '@primeuix/themes/aura'
import './tailwind.v4-0.css'

/** @type {import('vitepress').Theme} */
export default {
  extends: DefaultTheme,
  Layout: () => {
    return h(DefaultTheme.Layout, null, {
      // https://vitepress.dev/guide/extending-default-theme#layout-slots
    })
  },
  enhanceApp({ app, router, siteData }) {
    app.use(PrimeVue, {
      theme: {
        preset: Aura,
      },
    })
  },
}

This setup:

• Imports the Tailwind CSS file
• Configures PrimeVue with the Aura theme
• Extends the default Vitepress theme

Using PrimeVue Components

With auto-imports configured, I can now use PrimeVue components directly in my Markdown files without explicit imports:

# My Page with PrimeVue Components

<Button label="Click Me" icon="pi pi-check" />

<DataTable :value="myData">
  <Column field="name" header="Name"></Column>
  <Column field="value" header="Value"></Column>
</DataTable>

Tailwind CSS Usage

I can also use Tailwind utility classes throughout my content:

<div class="flex gap-4 p-4 rounded-lg bg-slate-100 dark:bg-slate-800">
  <div class="flex-1">
    <h3 class="text-xl font-bold mb-2">Feature One</h3>
    <p class="text-slate-600 dark:text-slate-300">Description goes here</p>
  </div>
  <div class="flex-1">
    <h3 class="text-xl font-bold mb-2">Feature Two</h3>
    <p class="text-slate-600 dark:text-slate-300">Another description</p>
  </div>
</div>

Benefits I’ve Experienced

Since implementing this setup, I’ve noticed several advantages:

1. Development Speed: Auto-imports save time and reduce boilerplate
2. Consistent UI: PrimeVue provides a cohesive look and feel
3. Flexibility: Tailwind allows for quick custom styling
4. Performance: Tailwind v4’s new engine is noticeably faster

Potential Issues and Solutions

While setting this up, I encountered a few challenges:

• Style Conflicts: I had to be selective about which Tailwind layers to import
• Theme Compatibility: Ensuring PrimeVue themes work well with Vitepress’s dark mode
• Build Size: Monitoring the impact on build size and optimizing accordingly

Conclusion

Integrating PrimeVue with auto-imports and Tailwind v4 into Vitepress has significantly enhanced my development workflow and the capabilities of my blog. The combination provides both structure and flexibility, allowing me to create rich, interactive content with minimal effort.

If you’re looking to enhance your Vitepress site with powerful UI components and flexible styling, I highly recommend this approach.