最近遇到一个原子化css的工具-tailwind css。之前在项目中，都是自己手动将常用的css样式提取出来放在一个公共文件当中，然后全局引用，初步接触到tailwind css之后发现这个工具很好用。
但是，由于对它不是很熟悉，所以也遇到了一些问题，下面记录一下：
问题：
在项目中，我通常会去引入ui库，例如element plus,ant design。但是引入tailwind css之后特别是按钮的样式，初始直接变成了透明，我第一反应就是样式冲突。通过度娘了解了一些解决办法：
问题原因：
tailwind css最新版本中，对样式进行了预设。影响按钮透明的代码如下：
button,
[type='button'],
[type='reset'],
[type='submit'] {
-webkit-appearance: button;
background-color: transparent; //就是它
background-image: none;
}
解决方式
- 方法一：
将ui库样式的引入放在tailwind css之后
- 方法二：
取消基础映射样式的引入，即不添加@tailwind base;这句话。
问题：
这样做，样式很多都会存在问题
- 方法三：(推荐)
1.禁用预设样式 （作用类似于方法一）
corePlugins: {
preflight: false,
}
2.添加自己的初始文件css
复制<https://unpkg.com/browse/tailwindcss@3.0.23/src/css/preflight.css> 内容，
删除button相关的样式
结果：这种方式相当于重写基础预设样式，此时解决了button透明问题的同时，其余样式影响较小
参考博文：https://www.ithere.net/article/1522822664205697025
- 方法四：
官网给出了这种方法，可以在原有基础上，自定义基础样式，那我们可以对button背景色设置透明的css样式进行重写
@layer base {
button, [type='button'], [type='reset'], [type='submit']
{ background-color: var(--n-color); //你用的UI库的 color }
}
**缺点**：但是这种方式会影响到tailwind原本的背景颜色，
相当于满足了ui库的button样式，却引发了tailwind 的样式（而且影响的样式多少未可知）
总结：
其实，tailwind css的样式都是原子化的，基础预设样式很好覆盖。就像我现在遇到的这种按钮透明的情况，直接可以在button上面定义一个自己的class进行覆盖就好了。
如下操作：
- 我用的是react+ant design,在不改变任何tailwind配置的情况下,初始按钮样式如下：
- 定义样式后
