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

相关推荐
liliangcsdn7 分钟前
mac mlx大模型框架的安装和使用
java·前端·人工智能·python·macos
CssHero10 分钟前
基于vue3完成领域模型架构建设
前端
PanZonghui13 分钟前
用项目说话:我的React博客构建成果与经验复盘
前端·react.js·typescript
言兴17 分钟前
教你如何理解useContext加上useReducer
前端·javascript·面试
sunbyte20 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | GoodCheapFast(Good - Cheap - Fast三选二开关)
前端·javascript·css·vue.js·tailwindcss
前端的日常21 分钟前
网页视频录制新技巧,代码实现超简单!
前端
前端的日常23 分钟前
什么是 TypeScript 中的泛型?请给出一个使用泛型的示例。
前端
今禾24 分钟前
一行代码引发的血案:new Array(5) 到底发生了什么?
前端·javascript·算法
ccc101827 分钟前
老师问我localhost和127.0.0.1,有什么区别?
前端
Struggler28134 分钟前
Chrome插件开发
前端