Nuxt 模块：如何在不破坏 PrimeVue 预定义样式的情况下使用 Tailwind

Question

Brief：我正在尝试启动一个 Nuxt.js 项目，并将 Tailwind CSS 和 PrimeVue 作为模块安装。我想使用预先设计的 PrimeVue（又名。

unstyled: false

）。然而，Tailwind 似乎打破了 PrimeVue 预定义的风格。

问题：在将

@nuxtjs/tailwindcss

添加为Nuxt模块之前，每个PrimeVue组件都工作正常（图1，粉色）。然而，添加后，每个 PrimeVue 组件的颜色都会受到“感染”（图 2，蓝色和深色）。我尝试过更改 PrimeVue 的主题，但没有成功。如何在不破坏 PrimeVue 的情况下同时使用两者？

配置文件：

nuxt.config.ts

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  devtools: { enabled: true },
  modules: [
    "nuxt-primevue",
    '@nuxtjs/tailwindcss',  // <-- add or delete this line
  ],
  primevue: {
    options: {
      unstyled: false,
    },
    importPT: { as: 'Tailwind', from: 'primevue/passthrough/tailwind' },
    cssLayerOrder: 'tailwind-base, primevue, tailwind-utilities',
  },
  css: [
    'primevue/resources/themes/lara-light-pink/theme.css',
    'assets/main.css'
  ]
})

Vue 源代码

app.vue

:

<template>
  <div>
    <Button>uwu</Button>
    <InputText v-model="value" placeholder="Search" />
    <div class="w-10 h-10 bg-slate-500">a</div>
    <div class="w-10 h-10 bg-primary-500">a</div>
  </div>
</template>

<script lang="ts" setup>
const value = ref("");
</script>

完整的项目源代码：https://github.com/Saplyn/nuxt-tailwind-primevue/tree/8427c5067063fd86614ee1fbe12acc8fa909eba5（刚刚启动的项目）

我已经尝试过：

• 按照官方PrimeVue入门指南操作，没有用。然而，我注意到：
  • 从

    importPT: { as: 'Tailwind', from: 'primevue/passthrough/tailwind' }

    中删除

    nuxt.config.ts

    可能会恢复一些样式效果（不再“感染”，焦点上有粉红色边框），但大部分样式都会丢失。
  • 从

    'primevue/resources/themes/lara-light-pink/theme.css'

    中移除

    nuxt.config.ts

    不会摆脱“感染”。
• 遵循PrimeVue Tailwind入门指南。但指南看起来模糊不清，我只设法得到原色作品（图2中绿色框内的a）。
• 改变模块的顺序，没有用。它仍然被“感染”。
• 禁用 Tailwind 飞行前，没有用，仍然“被感染”。

最后但并非最不重要的：我不确定这是否应该是 GitHub 上的问题，所以我决定首先在这里寻求帮助。另外，如果这应该成为一个问题，它应该属于哪个存储库？

Answer 1

搜索了一段时间后，我发现了 shinekyaw 的 nuxt3-primevue-tailwind-starterkit，它在某种程度上工作得很好。

我制作了一个修改版，其中仅包含 Nuxt.js 3、PrimeVue（样式化）和 Tailwind CSS。

我仍然不知道如何解决它，但它以某种方式起作用，而且我没有抱怨。