这里的问题是tailwinds prefigh在添加

@tailwind base;

添加到样式表：

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

这比material-ui的背景色定义更具体。
您可以通过删除“@tailwind base;“并实现自己的reset-stylesheet，但这还有其他缺点：https://tailwindcss.com/docs/preflight

我强烈建议不要这样做。我会选择一个css框架或库，并坚持使用它，因为你很可能会遇到风格冲突的问题。一些框架使用相同的css类，但幕后的代码不同，这意味着你会得到一个冲突。如果你习惯了与tailwind工作，我保证你会对现成的材料UI组件失去兴趣，甚至会因此失去兴趣。同时记住，当你选择某个库/框架时，你会把你的设计交付给它。因此，使用两个完全不同的将意味着你有一个不同的感觉网站的某些部分比其余部分。
如果您正在追求MUI的涟漪React，请看一下这个

span.ripple {
 position: absolute;
 border-radius: 50%;
 transform: scale(0);
 animation: ripple 600ms linear;
 background-color: rgba(255, 255, 255, 0.7);
}

@keyframes ripple {
 to {
  transform: scale(4);
  opacity: 0;
 }
}

https://codepen.io/vituja1/pen/oNWzNwq此codepen中还有JS代码。
这似乎也很有趣，虽然我还没有尝试过：https://www.npmjs.com/package/tailwindcss-ripple

目前的解决方案是将MATERIAL-UI版本降级到V^4.12.3。

我在把tailwind升级到3.1.6之后也遇到了这个问题。我也在使用material，它在2.2.x版本的tailwind上运行得很好。但是由于这次更新，应用程序中的所有按钮都变得透明了，因为tailwind也在材质按钮上应用了它的基本按钮类。所以，为了解决这个问题，我在我的全局CSS级别中为主要Material按钮应用了以下属性级别CSS通配符：

button[class*='MuiButton-containedPrimary'] {
 background-color: #0081cb!important;
 }

这解决了我的问题，颜色代码#0081cb是材料按钮的主颜色，除了主风格，同样你可以风格其他按钮的变化，如成功和错误以及。

这个问题是由于在tailwind指令中的preflight操作引起的。@base指令覆盖了mui样式！下面是解决方法。根据官方的MUI文档，您应该在tailwind.config.js文件中禁用peflight，如下所示：

module.exports = {
    corePlugins: {
    preflight: false,
  },
 }

我强烈推荐您阅读entire Style library interoperability doc。