解决若依框架与tailwindcss 样式冲突问题

首先下载tailwindcss 样式

https://www.tailwindcss.cn/docs/installation

我们可以按照官方文档来进行配置

 

npm install -D tailwindcss
npx tailwindcss init

 

/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}

在这里配置完成后，我们创建一个scss文件

src/assets/styles/tailwindcss.scss

 

在index.scss导入这个tailwindcss.scss

 

此时你会发现运行出来的结果，在若依框架中样式不对，与 Element 的css有冲突

 我这边写了个样式来查看tailwindcss 是否生效

 这里我们可以看到，运行出来的菜单栏样式扭曲了，而我们自己配置的样式是能显示出来的。所以tailwindcss.scss 已经导入成功。但是与Element有冲突

解决方法：

 找到这个css文件

我的路径： node_modules/tailwindcss/lib/plugins/css/preflight.css

复制出来

然后粘贴到这个位置，跟main.js同级

 

 

找到这里，把svg注视掉

然后导入到main.js 函数里。运行出来。

 

配置好以后，运行npm run dev 

 ok 问题解决，遇到类似的情况，可以按照这样的方式去修改