PrimeVue +尾风冲突:缺少按钮背景

Question

我从一个相对新鲜的Vue3 + PrimeVue +尾风设置开始。

我的问题是，当我添加尾风时，PrimeVue按钮不能正确显示。

要测试这一点，请查看下面的沙盒。

一旦tailwind.css在main.ts中被注释掉，PrimeVue按钮就会再次正确显示。

而且只有“主”按钮才会受到影响。

你能帮我把PrimeVue按钮和尾风一起正确显示吗？

Answer 1

尾风CSS似乎正在将按钮背景设置为透明。

我将它的CSS移到了示例中的Prime (main.ts)之前，它解决了缺少的背景问题。

然而，我不知道这是否会产生其他意想不到的后果。

Answer 2

有意思的。预飞是Tailwind应用的一组基本样式，它将按钮背景颜色设置为透明。

如果您想完全禁用预飞(可能是因为您正在将Tailwind集成到现有项目中，或者因为您希望提供自己的基本样式)，则只需在corePlugins文件的tailwind.config.js部分中将预飞设置为false：

module.exports = {
      corePlugins: {
        preflight: false,
      }
    }

在这篇文章中回答