如何完美解决 Ant Design Vue 与 Tailwindcss 之间样式冲突

冲突情况复现

最近项目加入了 Ant Design Vue 与 TailwindCSS 依赖，结果出现最明显的问题就是 Button 组件背景色全变透明。通过搜索引擎找了下相关的解决方法：

1、直接样式覆盖恢复

这种方式算是比较粗暴的一种：Ant Design Vue 组件使用默认样式，然后被 TailwindCSS 改为符合它们设计标准的样式，然后用户又强行覆盖了一遍样式。相关代码类似如下：

css 复制代码

@tailwind base; 
@tailwind components; 
@tailwind utilities; 

.anticon svg { 
    vertical-align: baseline; 
} 
.ant-btn-primary { 
    background-color: #1677ff; 
} 
.ant-btn-default, .ant-btn-dashed { 
    background-color: white; 
}

2、直接禁用 Preflight 配置

直接关闭 TailwindCSS 的预置设置，这将导致很多常态化的 CSS 都会失效，打开你的 tailwind.config.js，然后添加以后代码：

js 复制代码

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

解决思路

通过测试，不管上面哪种方式，效果其实都不是那么理想！上述方法1原则上可行，但是遇到 hover 等状态，就得多写一套 css 代码了，所以我焦点转向方法2，在方法2基础上深入一下：当我们禁用了 preflight 配置，其实涉及该 css 配置的样式文件是不生效的，既然不生效，那我们就可以从 TailwindCSS 依赖里拷贝一份 preflight 样式出来，把冲突的 css 部分注释掉，再引入项目内，这样就完美解决了局部样式冲突。

解决方案

1、禁用 Preflight 配置

打开你的 tailwind.config.js，向其添加类似下面的代码（请参照修改）：

js 复制代码

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
  
  // =========================
  // 这是重点👇
  // =========================
  corePlugins: {
    preflight: false,
  }
}

2、拷贝 Preflight 样式

在项目下 node_modules\tailwindcss\src\css 内的 preflight.css 文件拷贝出来，粘贴到你项目的样式文件夹中，如 src\style\preflight.css，如图：

3、注释掉冲突的样式

打开刚才粘贴的 preflight.css 文件，因为我这边主要是按钮样式冲突，所以找到以下代码，并将其注释：

css 复制代码

/* 
button,
[type='button'],
[type='reset'],
[type='submit'] {
  -webkit-appearance: button; 
  background-color: transparent; 
  background-image: none; 
} */

4、引入自定义的 Preflight 样式

当然，拷贝过来了别忘了把 preflight.css 文件引入到项目内，打开你项目的 main.ts，在合适的位置将下面代码粘贴进去：

js 复制代码

// 请确认导入样式路径正确
import './style/preflight.css'

这样，就能完美解决 Ant Design Vue 与 Tailwindcss 之间样式冲突啦！举一反三，如果其他方面也出现冲突问题，可以按这类思路进行处理哦！最后附上处理后的图片：