title: unexpected behavior when using Tailwind, and MUI in NextJS Project (White Button error)
body: <p>I'm currently building a project with NextJS, TailwindCSS and MUI React UI library.</p>
  <p>Whenever I try to add a MUI Button to my project it works fine but the color of the button stays White.</p>
  <p><a href="https://i.stack.imgur.com/JrTmC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JrTmC.png" alt="enter image description here" /></a></p>
  <p>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.</p>
  <p>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.</p>
  <p>is there a way to fix it while keeping the directives? or maybe include tailwind CSS using another method?</p>
  <p><strong>UPDATE</strong> (15/8/2022)</p>
  <p>The MUI Team added support for tailwind CSS now please follow this link for instructions
  <a href="https://mui.com/material-ui/guides/interoperability/#tailwind-css" rel="nofollow noreferrer">https://mui.com/material-ui/guides/interoperability/#tailwind-css</a></p>