Mui与Tailwindcss按钮样式冲突,透明不显示

478 阅读1分钟

Mui和Tailwindcss都有定义按钮的方式,但是最近使用的Tailwindcss版本,默认按钮样式会影响Mui中的按钮样式,导致Mui中的按钮组件显示为透明,无法正常使用。

button,
[type='button'],
[type='reset'],
[type='submit'] {
  -webkit-appearance: button;
  background-color: transparent;
  background-image: none;
}

起使用的就是上面这行样式,背景色设置为透明会将未使用Tailwindcss的所有button为透明。

我使用的Tailwindcss版本是3.3.0,Mui版本是5.15.5。

目前只有一种解决办法,在tailwind.config.js配置文件中添加:

corePlugins: {
   preflight: false
}

并下载对应版本的preflight.css,将下载的css引入至项目即可。

import '@/_assets/style/preflight.css'