unexpected behavior when using Tailwind, and MUI in NextJS Project (White Button error)-CodePudding

I'm currently building a project with NextJS, TailwindCSS and MUI React UI library.

Whenever I try to add a MUI Button to my project it works fine but the color of the button stays White.

When hovering the color returns normal, also when clicking the button still has the ripple effect. but when not hovering it return to the color white.

By removing the tailwind directives from the global css file that I'm importing at the _app.{js,jsx.ts,tsx} file, the button acts normal again But this will also remove TailwindCSS.

is there a way to fix it while keeping the directives? or maybe include tailwind CSS using another method?

CodePudding user response：

I would highly recommend not doing this. I would choose one css framework or library and stick with it since you will most likely run into issues with conflicting styles. Some of the frameworks use the same css classes but the code behind the scenes differs, meaning you will get a conflict. If you get used to working with tailwind, I guarantee you will loose interest in the ready-made components of material UI and even tailwind for that matter. Also keep in mind that when choosing a certain library/framework you commit your design to it. So using two entirely different ones will mean you have a different feel of some parts of the website than the rest of it.

Take a look at this if you are after the MUI ripple effect

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 There is also JS code in this codepen.

This also seems interesting, although I haven't tried it yet: https://www.npmjs.com/package/tailwindcss-ripple

CodePudding user response：

Current solution for now is to downgrade MATERIAL-UI verion to V ^4.12.3.