13

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 enter image description here

Usama Abdul Razzaq
  • 643
  • 2
  • 10
  • 19
  • 12
    I would highly recommend not doing this. Pick a singular css framework and/or utility library and stick with it. You'll run into conflicting styles/classes left and right and bloat your project. Learn tailwindcss really well and I'm willing to bet you'll find yourself feeling less and less attracted to ready-made component libraries. – jrnxf Jul 02 '21 at 04:29
  • 1
    Does this answer your question? [Is it right to use two or more different front-end frameworks in a single web app?](https://stackoverflow.com/questions/28377686/is-it-right-to-use-two-or-more-different-front-end-frameworks-in-a-single-web-ap) – jrnxf Jul 02 '21 at 06:10
  • @Usama, you can use `classes` object prop in `TextField` props, Tailwind utility will override their classes in Material-UI through use Material-UI API props. so define your styles into `` check this Doc https://material-ui.com/api/text-field/#props – JsWizard Jul 02 '21 at 07:27
  • For the second question: Does this answer your question [React + Material-UI - Warning: Prop className did not match](https://stackoverflow.com/q/50685175/11613622) – brc-dd Jul 02 '21 at 08:35
  • Usama, use this link https://tailwindcss.com/docs/guides/create-react-app and if you finished to setting, then package install Material-UI. I also using this setting as well. – JsWizard Jul 02 '21 at 13:18
  • This warning message for your nextjs not for using material. Every time that nextjs make build from your code some css classes create new name. in this case your formControl was formControl-23 but new one is formControl-1 because that you have this warning it's not an important warning. If you want to check it you can run again your nextjs server. – Erfan HosseinPoor Jul 04 '21 at 04:37
  • 4
    I have heard that some libraries, like MaterialUI have better baked in accessibility, where AFAIK if you were to style things with tailwind, you wouldn't have the benefits of accessibility. Wonder if anyone has any thoughts on that? – twknab Nov 05 '22 at 23:57

2 Answers2

4

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?

krishnaacharyaa
  • 14,953
  • 4
  • 49
  • 88
1

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>
Malcolm Crum
  • 4,345
  • 4
  • 30
  • 49