menu

Questions & Answers

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

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

Comments:
2023-01-21 00:20:05
hi,can you please print your code here
2023-01-21 00:20:05
It is the same as this exmaple (Offical MUI nextjs example) github.com/mui-org/material-ui/tree/master/examples/nextjs Just add a global.css file, add tailwind directives to it after installing tailwindCSS, and import the css file into _app.js file Afterwards try adding a mui button to reproduce the error.
Answers(5) :

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.

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

the problem is due to preflight action in tailwind directives. @base directive overrides the mui styles! Here is the solution. based on official MUI doc, you should disable peflight in tailwind.config.js file, as below :

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

I highly recommend you to read the entire Style library interoperability doc.

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

Comments:
2023-01-21 00:20:05
This worked for me. But it sucks as the two worked perfectly before. They should try and fix this.
2023-01-21 00:20:05
I ran this, it did not help..... npm install @material-ui/core@4.12.3

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

Comments:
2023-01-21 00:20:05
Thank you so much for the comment, It really helps especially the snippet. I understand that mixing same-purpose frameworks yield errors most of the time but I usually work with them both on my React Project and they behave ok. This specific problem occurs when mixing them in NextJS. The thing is that MUI has an amazing arsenal of components for almost every use case. and Tailwind is the perfect way for small grain CSS control, that's why mixing them can be powerful.
2023-01-21 00:20:05
Yeah, I'm in the same position. MUI has superior components and design handoff, I can't imagine going back to writing CSS when I've used Tailwind a lot and experienced the benefits. It's wild that the two frameworks aren't used together that much.