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

Solution 1:

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