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

[Laityned]

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:

3. 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

[mapache-salvaje]

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]

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]

Does this example help short out your problem?