样式冲突示例

UnoCSS 用了 Tailwind CSS 样式之后，与 Element-Plus 的 Button 样式有冲突，导致背景色以及字体显示不出来。下图为具体效果：

解决方法

在 unocss.config.ts 配置文件中加上 preflights 配置

// unocss.config.ts
// ...
preflights: [
  {
    getCSS: () => `
      .el-button {
        background-color: var(--el-button-bg-color, var(--el-color-white))
      }
    `,
  },
],

解决过程

• 刚开始在 Element-Plus GitHub 仓库 issue 里搜到了 Tailwind CSS 的解决方案。

  • [Bug Report] tailwind css has conflict with el-button · Issue #5693 · element-plus/element-plus (github.com)

• 里面提到了两个解决方案

  • blog.csdn.net/weixin_4504…
  • juejin.cn/post/708461…

但是在 UnoCSS 配置项里并没有提供文章里 Tailwind CSS 的 plugins -> addBase 方法。 之后在 UnoCSS issue 搜索 addBase 关键字，发现 UnoCSS 提供了 preflights 配置可以达到同样效果。

• Strategy to implement forms plugin · Issue #54 · unocss/unocss (github.com)

于是就有了以下解决方案：

// unocss.config.ts
// ...
preflights: [
  {
    getCSS: () => `
      .el-button {
        background-color: var(--el-button-bg-color, var(--el-color-white))
      }
    `,
  },
],

preflights 配置详情见： Preflights (unocss.dev)