如何完美解决 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 之间样式冲突啦!举一反三,如果其他方面也出现冲突问题,可以按这类思路进行处理哦! 最后附上处理后的图片:

相关推荐
mCell18 分钟前
JavaScript 的多线程能力:Worker
前端·javascript·浏览器
超级无敌攻城狮2 小时前
3 分钟学会!波浪文字动画超详细教程,从 0 到 1 实现「思考中 / 加载中」高级效果
前端
excel3 小时前
用 TensorFlow.js Node 实现猫图像识别(教学版逐步分解)
前端
gnip3 小时前
JavaScript事件流
前端·javascript
小菜全3 小时前
基于若依框架Vue+TS导出PDF文件的方法
javascript·vue.js·前端框架·json
赵得C3 小时前
【前端技巧】Element Table 列标题如何优雅添加 Tooltip 提示?
前端·elementui·vue·table组件
wow_DG3 小时前
【Vue2 ✨】Vue2 入门之旅 · 进阶篇(一):响应式原理
前端·javascript·vue.js
weixin_456904273 小时前
UserManagement.vue和Profile.vue详细解释
前端·javascript·vue.js
资深前端之路3 小时前
react 面试题 react 有什么特点?
前端·react.js·面试·前端框架
aaaweiaaaaaa3 小时前
HTML和CSS学习
前端·css·学习·html