PrimeVue+Tailwind+Vue/Vite环境下Toast组件样式失效问题求助

使用PrimeVue + Vue/Vite + Tailwind搭建前端项目，已配置unstyled模式并引入Lara预设。Button组件设置severity="danger"样式正常，但Toast组件设置severity后无样式，不过info、life等属性可正常工作。

相关代码 #

App.vue测试代码 #

<template>
    <div class="card flex justify-center">
        <Toast />
        <Button label="Show" @click="show()" />
    </div>
    <Button label="Danger" severity="danger" />
</template>

<script setup>
    import { useToast } from "primevue/usetoast";
    const toast = useToast();

    const show = () => {
        toast.add({ severity: 'danger', summary: 'Info', detail: 'Message Content', life: 6000 });
    };
</script>

tailwind.config.js配置 #

/** @type {import('tailwindcss').Config} */

export default {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
    "./assets/presets/**/*.{vue,js,ts,jsx,tsx}"
  ],
  theme: {
    extend: {
      colors: {
        primary: 'rgb(var(--primary))',
        'primary-inverse': 'rgb(var(--primary-inverse))',
        'primary-hover': 'rgb(var(--primary-hover))',
        'primary-active-color': 'rgb(var(--primary-active-color))',

        'primary-highlight': 'rgb(var(--primary)/var(--primary-highlight-opacity))',
        'primary-highlight-inverse': 'rgb(var(--primary-highlight-inverse))',
        'primary-highlight-hover': 'rgb(var(--primary)/var(--primary-highlight-hover-opacity))',

        '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))'
      }
    },
  },
  plugins: [],
}

main.js配置 #

import './assets/main.css'

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import PrimeVue from 'primevue/config'
import Lara from '@/assets/presets/lara'

import App from './App.vue'
import router from './router'

// Import components from Primevue

import Button from 'primevue/button'
import FloatLabel from 'primevue/Floatlabel'
import InputText from 'primevue/inputtext'
import Toast from 'primevue/toast'
import ToastService from 'primevue/toastservice'

const app = createApp(App)

app.use(createPinia())
app.use(router)
app.use(PrimeVue,{
    unstyled: true,
    pt: Lara,
})
app.use(ToastService)

app.component("Button",Button)
app.component("FloatLabel",FloatLabel)
app.component("InputText",InputText)
app.component("Toast",Toast)

app.mount('#app')

1. 补全Lara预设中Toast组件的样式配置 #

检查@/assets/presets/lara文件，确认是否包含Toast组件的样式定义，尤其是不同severity对应的动态类注入。示例配置如下：

export default {
  // ...其他组件配置
  Toast: {
    root: ({ props }) => ({
      class: [
        'p-toast',
        props.severity ? `p-toast-${props.severity}` : ''
      ]
    }),
    message: ({ props }) => ({
      class: [
        'p-toast-message',
        props.severity ? `p-toast-message-${props.severity}` : ''
      ]
    }),
    // 补充其他Toast子元素的样式配置
  }
}

如果预设中缺少这部分内容，需要手动添加，确保severity对应的类被正确应用到Toast元素上。

2. 确保Tailwind扫描到Toast的动态类 #

Toast的severity类（如p-toast-danger）是动态生成的，Tailwind默认会清除未扫描到的类。可以通过两种方式解决：

• 在tailwind.config.js的content中添加PrimeVue Toast组件的路径：

content: [
  // ...原有配置
  "./node_modules/primevue/toast/**/*.{vue,js,ts,jsx,tsx}"
]

• 或者在safelist中手动添加这些类：

safelist: [
  'p-toast-danger',
  'p-toast-success',
  'p-toast-warning',
  'p-toast-info'
]

3. 验证全局样式配置的传递 #

在PrimeVue全局配置中添加ptOptions，确保样式配置正确合并：

// main.js
app.use(PrimeVue, {
  unstyled: true,
  pt: Lara,
  ptOptions: {
    mergeSections: true,
    mergeProps: true
  }
})

也可以在Toast组件上手动绑定预设样式：

<Toast :pt="$primevue.config.pt.Toast" />

4. 检查CSS变量加载 #

确认main.css中正确引入了Lara预设的CSS变量，比如：

@import '@primevue/themes/lara';

避免自定义CSS变量覆盖预设中severity对应的颜色值。

内容的提问来源于stack exchange，提问作者Jasper