最近在开发一个图床管理工具，能够兼容S3。前端开发用了 Vue3 + Element Plus + Tailwind CSS 的技术栈。前些时候开发了一个外包的学生管理系统，用的是腾讯的 TDesign + Tailwind CSS，所以我想切换应该还顺畅。
开发一段时间后，发现el-button的颜色不太对。默认下应该是蓝色的，结果过内部直接透明，看不到白色的字。
打开F12开发者工具，定位元素查看CSS样式，发现问题出在这段样式上。
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/
button,
[type='button'],
[type='reset'],
[type='submit'] {
-webkit-appearance: button; /* 1 */
background-color: transparent; /* 2 */
background-image: none; /* 2 */
}
通过工具定位到这段样式来自Tailwind CSS。因此猜想：这段样式来自Tailwind CSS的默认样式。Tailwind CSS 中会用诸如bg-blue-200为按钮指定颜色，因此这里默认会出现透明的情况。而在TDesign中t-button用了多个class定位，优先级高，所以没能出线这样的问题。
定位到问题后，查询Tailwind CSS官方文档，可以看到默认开启了preflight用于重置样式，因此在tailwind.config.js中加入如下代码禁用。
module.exports = {
corePlugins: {
preflight: false,
}
}加入后，按钮确实不出现颜色丢失的情况了，但很多样式重置也消失了。例如border消失。因此，不能简单禁用。
官方文档中，所有的preflight样式都放在了tailwindcss/src/css/preflight.css中。直接修改这里的样式并重新启用preflight，发现并不生效，很有可能这里的css只适用于预览而不参与渲染。
重新思考后，我选择继续禁用preflight，并且修改这段css，在main.js中直接引入修改后的preflight.css。
import 'tailwindcss/src/css/preflight.css'为了使修改能同步到git中，可以使用patch-package生成补丁。
yarn add patch-package --dev
npx patch-package tailwindcss这样，修改的内容就会生成补丁，其他设备同步时会apply。
