文章
问答
冒泡
解决tailwindcss和material-ui按钮样式冲突的bug(适用大多数tailwindcss+第三方组件库)

现象 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;
}
tailwind

关于作者

小乙哥
学海无涯,回头是岸
获得点赞
文章被阅读