现象 material-ui的按钮样式没了
原因分析:tailwindcss升级到v3之后,会默认预加载基本样式,而预加载的基本样式有下面这个样式,强制把按钮背景色设置成透明了
button,
[type='button'],
[type='reset'],
[type='submit'] {
-webkit-appearance: button;
background-color: transparent;
background-image: none;
}
解决方案一:
删除 @tailwind base;这个问题是解决了但是会引发一大堆别的问题
解决方案二:
放弃按需引入material-ui按钮,而是全局引入,在@tailwind base之后全局引入
解决方案三:
在tailwubd.config.js中禁用预加载,然后新建一个preflight.scss文件,复制https://unpkg.com/browse/tailwindcss@3.0.23/src/css/preflight.css 内容,删除button相关的样式
这么做有个问题就是,原生的button按钮背景色都会变灰,需要在引入preflight.scss之后加一个样式,代码如下
module.exports = {
...
corePlugins: {
preflight: false,
},
...
};
button {
background-color: transparent;
}