Primevue+Tailwind CSS使用配置

1、创建vue项目

1
npm create vue@latest

2、安装primevue

1
npm install primevue

在main.js中启用primevue

1
2
3
4
import PrimeVue from 'primevue/config';
const app = createApp(App);

app.use(PrimeVue, { /* options */ });

3、启用组件自动导入

1
2
npm i unplugin-vue-components -D
npm i @primevue/auto-import-resolver -D

在vite.config.js中配置组件自动解析

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite';
import {PrimeVueResolver} from '@primevue/auto-import-resolver';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [
        PrimeVueResolver()
      ]
    }),
  ]
})

4、安装主题theme

1
npm install @primevue/themes

在main.js文件中配置主题：

1
2
3
4
5
6
7
8
9
10
11

import { createApp } from 'vue';
import PrimeVue from 'primevue/config';
import Aura from '@primevue/themes/aura';

const app = createApp(App);
app.use(PrimeVue, {
    theme: {
        preset: Aura
    }
});

当前primevue内置支持4种主题：Aura, Material, Lara, Nora

5、使用 primevueicons

1
npm install primeicons

6、集成 tailwind css

1
2
3
4
npm i tailwindcss-primeui

-- 生成 tailwind.config.js文件
npx tailwindcss init

在应用sytle.css中加入以下内容：

1
2
3
@tailwind base;
@tailwind components;
@tailwind utilities;

在 tailwind.config.js文件中引入primevue支持

1
2
3
4
5
6
7
const primeui = require('tailwindcss-primeui');

export default {
    content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
    darkMode: ['selector', '[class="p-dark"]'],
    plugins: [primeui]
};

7、Noir主题js内容

基于 Aura定制主题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
import { definePreset } from '@primevue/themes';
        import Aura from '@primevue/themes/aura';

        const Noir = definePreset(Aura, {
            semantic: {
                primary: {
                50: '{surface.50}',
                100: '{surface.100}',
                200: '{surface.200}',
                300: '{surface.300}',
                400: '{surface.400}',
                500: '{surface.500}',
                600: '{surface.600}',
                700: '{surface.700}',
                800: '{surface.800}',
                900: '{surface.900}',
                950: '{surface.950}'
                },
                colorScheme: {
                    light: {
                        primary: {
                        color: '{primary.950}',
                        contrastColor: '#ffffff',
                        hoverColor: '{primary.900}',
                        activeColor: '{primary.800}'
                        },
                        highlight: {
                        background: '{primary.950}',
                        focusBackground: '{primary.700}',
                        color: '#ffffff',
                        focusColor: '#ffffff'
                        },
                    },
                    dark: {
                        primary: {
                        color: '{primary.50}',
                        contrastColor: '{primary.950}',
                        hoverColor: '{primary.100}',
                        activeColor: '{primary.200}'
                        },
                        highlight: {
                        background: '{primary.50}',
                        focusBackground: '{primary.300}',
                        color: '{primary.950}',
                        focusColor: '{primary.950}'
                        }
                    }
                }
            }
        });

        export default Noir;
Vue
Primevue+Tailwind CSS使用配置
https://probiecoder.cn/vue/primevue_tailwindcss.html
作者
duwei
发布于
2025年4月22日
许可协议