问题
使用tailwindcss会和已有的框架样式冲突,比如antd、rsuite,导致页面展现的样式出现问题,比如按钮透明。
解决方案
禁止tailwindcss的默认属性,添加corePlugins对象,并设置preflight为false,修改文件 tailwind.config.js
module.exports = {
...
...
corePlugins: {
preflight: false
}
}
然后引入自己修改后的preflight.css:https://unpkg.com/browse/tailwindcss@3.0.23/src/css/preflight.css
// 从第184行开始删除下面的内容
button,
[type='button'],
[type='reset'],
[type='submit'] {
-webkit-appearance: button; /* 1 */
background-color: transparent; /* 2 */
background-image: none; /* 2 */
}