Is it a good practice to use Material Ui and tailwind in a same project

Question

I am using next.js with tailwind css and i somehow need some of the ready to use components in my project so i can save my time, for that i have used material-ui. My application works fine but i have got a warning message. Is is possible to use both technologies (material-ui and tailwind css) at same project, if "yes"(means if the combination of both wont effect the performance of the project or any other issue in future ) Is there is any way to remove the warning message it am showing you below

Answer 1

Is it good practice ?

Absolutely Not, You'll face many naming conflicts and it causes many confusions to the compiler and the precedence will be unusual

But can you achieve this ?

Yes, you can !!

---

To avoid the naming conflicts use the prefix option in your tailwind.config.js file

// tailwind.config.js
module.exports = {
  prefix: 'tw-',   👈 Use your desired prefix 
}

So now you can use the prefix tw- before the class name of tailwind-css which wont break any of your existing styles.

---

Note

If you want tailwind classes to get more precedence than any other css styles , you can set the important option to true on tailwind.config.js

module.exports = {
  important: true,
}

---

Extra

To understand the css precedence follow this What is the order of precedence for CSS?

Answer 2

Yes, you can.

Here is the official documentation: https://mui.com/material-ui/guides/interoperability/#tailwind-css

• Disable preflight in tailwind.config.js
• Add important to your root element
• Use <StyledEngineProvider injectFirst>