search

mui / material-ui

Material UI: Comprehensive React component library that implements Google's Material Design. Free forever.
https://mui.com/material-ui/
MIT License
93.52k stars 32.19k forks source link

[docs][material-ui] Update "Style library interoperability" doc for Tailwind CSS + Next.js App Router #40416

Open Laityned opened 9 months ago

Laityned commented 9 months ago

Related page

https://mui.com/material-ui/guides/interoperability/#tailwind-css

Kind of issue

Unclear explanations

Issue description

I was looking for how to integrate material-ui together with nextjs 14 app router and tailwind and it appears that following the guide does not results in a working configuration. Step three tells you to add the important option using the id of your app wrapper:

  1. Add the important option, using the id of your app wrapper. For example, #__next for Next.js and "#root" for CRA:

The #__next id is only valid for the page router of Nextjs. It is not present in the app router. There is no element at all with an id, so people should insert this them self in their root layout

Context 🔦

No response

Search keywords: interoperability nextjs tailwind app router

samuelsycamore commented 7 months ago

Thanks for reporting this @Laityned! We need to update the "Style library interoperability" doc to include instructions for using Tailwind CSS with the Next.js App Router.

MaximePremont commented 6 months ago

Hello, I found this issue because I developed my entire project using Tailwind and MaterialUI, and it was at build time that I realised that there were differences between the build version and the development version. I finally realised that this was due to the combination of MaterialUI and Tailwind.

I'm using NextJS 14 with an app router, and given the changes to be made in the documentation, I don't know what to do to solve my problem.

I tried to do this:

  1. Apply the steps described here: https://mui.com/material-ui/integrations/nextjs/, the problems are now the same in production and development.
  2. Then apply the steps described here: https://mui.com/material-ui/integrations/interoperability/#tailwind-css , now depending on the case, everything is displayed without any CSS or everything is strange (depending on the order of my tailwind config, I don't understand).
  3. As explained in this issue, I tried to apply "important: '#root' " in my tailwind config by adding an id to my root div myself. But no results.

Have I misunderstood, and can I only use the preflight of one or the other in the build version? In which case I have to change the style of my entire project again? Or have I misunderstood something else?

Perhaps you have an example project? Thank you very much for your help ! :)

Laityned commented 6 months ago

Does this example help short out your problem?

MaximePremont commented 6 months ago

Does this example help short out your problem?

Yes, thank you, I've been able to solve the problem. I've also better understood the value of preflights and made the necessary configurations to transpose my project more easily. Thanks a lot!

HasanMothaffar commented 1 month ago

There's another point that could be made clearer in the docs regarding integration with Next.js. If one uses the enableCssLayer: true option explained in MUI integration with Next.js do we still need to use the <StyledEngineProvider injectFirst>... mentioned in step 4 in MUI integration with TailwindCSS ?