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

user_12763474 0
Viewed 1297

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.

enter image description here

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?

UPDATE (15/8/2022)

The MUI Team added support for tailwind CSS now please follow this link for instructions https://mui.com/material-ui/guides/interoperability/#tailwind-css

tailwind-css material-ui next.js reactjs css
4 Answers

The problem here is that tailwinds prefligh implements the following styles when adding

@tailwind base;

to your stylesheet:

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

This is more specific than the background-color definitions of material-ui.

You can fix this by removing "@tailwind base;" from your styles and implementing your own reset-stylesheet, but this has other drawbacks: https://tailwindcss.com/docs/preflight

user_54447140

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

user_156490900

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

user_127634740

I also ran into this problem after upgrading tail wind to 3.1.6. I also am using material, which was working fine with 2.2.x version of tailwind. But due to this update, all buttons in the app became transparent as tailwind applied its base button classes over material buttons too. So, to solve this problem, I applied the following attribute level CSS wildcard in my global css level for primary Material buttons:

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

This solved the problem for me, the color code #0081cb is the primary color of material button, apart from primary style, similarly you can style other button variants like success and error as well.

user_31271780
Related