Unexpected behavior (white button bug) when using Tailwind and MUI in NextJS project

Question

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

Whenever I try to add a MUI button to my project, it works fine but the color of the button remains white.

The color returns to normal on hover and still has the ripple effect when the button is clicked. But when not hovering it returns white.

By removing the tailwind directive from the global css file I imported in the _app.{js,jsx.ts,tsx} file, the button worked fine again, but this also removed the TailwindCSS.

Is there a way to fix it while retaining the directive? Or maybe use another method to include tailwind CSS?

Updated (August 15, 2022)

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

Answer 1

The problem here is that tailwinds preflig implements the following style 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 material-ui's background color definition.

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