CODEWITHSUNDEEP
cssreactjsmaterial-uinext.jstailwind-css
Abobker Elaghel
Abobker Elaghel

Reputation: 352

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)

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

Upvotes: 11

Views: 7828

Answers (6)

Catur Wicaksono
Catur Wicaksono

Reputation: 278

it works for me,

in the tailwind.config.js file in the root directory, add the corePlugins config. here's an example:

/** @type {import('tailwindcss').Config} */

module.exports = {
  // add this section to resolve
  corePlugins: {
    preflight: false,
  },
  content: [
    "./app/**/*.{js,ts,jsx,tsx}",
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",

    // Or if using `src` directory:
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Upvotes: 5

Saheb Mohammadi
Saheb Mohammadi

Reputation: 465

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.

Upvotes: 3

chax808
chax808

Reputation: 1

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.

Upvotes: 0

Kyoss
Kyoss

Reputation: 189

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

Upvotes: 7

Abobker Elaghel
Abobker Elaghel

Reputation: 352

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

Upvotes: 0

Konstantin Tsvetkov
Konstantin Tsvetkov

Reputation: 31

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

Upvotes: 2

Related Questions