解决tailwind与elementUI样式不兼容问题
项目中引入了elementUI和tailwindcss会出现按钮样式混杂的问题，一直关注tailwindcss仓库，终于在今天找到了答案。
重现 bug
在 vue3 中引入 elementUI,并配置 tailwindcss之后，创建一个 Element 按钮组件，发现样式不正常：
<template>
<div>
Home page
<ElButton type="primary">我是一个按钮</ElButton>
</div>
</template>
调出 开发人员工具 之后，原来是 tailwindcss 的样式比 elementui 本身的样式优先级要高，它们都是使用的选择器是 attribute selector（属性选择器），所以是引用顺序的问题，找到思路以后动手吧。
但是事情远远没有我想象的这么简单，因为我使用的是按需引用，用的插件自动导入所需要的组件及其样式，所以其先后顺序我是控制不了的。
bug 还原示例仓库：rainym00d/bug_to_reproduce: vue bug to reproduce (github.com)
解决方案
方案1 删除 @tailwindcss base 样式
这种做法简单粗暴，base里存放的是原生标签初始样式，删了那肯定不起冲突了，但会导致一些不可预料的问题
// @tailwind base;
@tailwind components;
@tailwind utilities;
方案2 全量引入 element ui
有个不是很完美但能够实现的方法，就是先把 tailwindcss 引入，之后再将Element Plus所有样式统一引入了，这种做法很明显，自带的 treeShaking 一大利好就无了。
import { createApp } from 'vue'
import './css/app.css' // <- 引入 tailwindcss
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css' // -> 引入 element-plus
方案3 关闭默认样式 手动处理冲突样式
这个方法是比较推荐的，在 tailwindcss 的配置文件中关闭默认样式，然后手动导入样式，对有冲突的样式处理。
// tailwind.config.js
module.exports = {
corePlugins: {
preflight: false,
}
}
然后创建 preflight.css文件，去下面的 unpkg 复制基础样式到 preflight.css中，然后删掉 188 行关于 button 冲突的样式。
https://unpkg.com/browse/tailwindcss@3.0.23/src/css/preflight.css
引入之后，删掉
然后完美解决
总结
出现问题自己思考解决不了马上翻一下仓库 issue 已经成为我的习惯了，很佩服那些为问题的解决推波助澜的大佬们，并且提问者也很专业，总之学到很多。