[docs] Add Tailwind CSS v4 integration guide #45906
Conversation
| @@ -18,7 +18,7 @@ export const replaceMaterialLinks = (url: string) => { | |||
| return url; | |||
| } | |||
| return url.replace( | |||
| /(guides|customization|getting-started|discover-more|experimental-api|migration)/, | |||
| /(guides|customization|getting-started|discover-more|experimental-api|migration|integrations)/, | |||
There was a problem hiding this comment.
Add this change to fix the wrong generated url of the deploy preview
In the image above, the material should be material-ui.
…/tailwind-integration
|
|
||
| Follow the [App Router guide](/material-ui/integrations/nextjs/#app-router) and do the following steps: | ||
|
|
||
| - pass `{ enableCssLayer: true }` to the `options` prop of `AppRouterCacheProvider` component. |
There was a problem hiding this comment.
| - pass `{ enableCssLayer: true }` to the `options` prop of `AppRouterCacheProvider` component. | |
| - enable the CSS layer feature |
People will figure out what they need to do in the code-snippet bellow.
|
|
||
| ```tsx title="src/app/layout.tsx" | ||
| import { AppRouterCacheProvider } from '@mui/material-nextjs/v15-appRouter'; | ||
| import GlobalStyles from '@mui/material/GlobalStyles'; |
There was a problem hiding this comment.
| import GlobalStyles from '@mui/material/GlobalStyles'; |
It's not used in the code.
|
|
||
| Follow the [Pages Router guide](/material-ui/integrations/nextjs/#pages-router) and do the following steps: | ||
|
|
||
| - pass a custom cache with `{ enableCssLayer: true }` to `documentGetInitialProps` function. |
There was a problem hiding this comment.
| - pass a custom cache with `{ enableCssLayer: true }` to `documentGetInitialProps` function. | |
| - enable the CSS layer feature |
Same as above.
| @import 'tailwindcss'; | ||
| ``` | ||
|
|
||
| ### Next.js Pages Router |
There was a problem hiding this comment.
I couldn't make this work, I tried to follow the steps from the Next.js guide and this one, but Tailwind classes were not overriding the MUI styles. It would be great if we can have an example to link (together with the guides), as combining the two guides it's kind of hard to follow.
Also, I've created #45922 with bunch of issues I found on the Next.js guide.
There was a problem hiding this comment.
This is expected because we haven't release #45596.
Updated the PR description to make it clear what build to use.
There was a problem hiding this comment.
Ah, ok, I will update my testing app to use the build from that PR.
closes #44700
Docs: https://deploy-preview-45906--material-ui.netlify.app/material-ui/integrations/tailwindcss/tailwindcss-v4/
v3to the guide in "Style library interoperability" sectionTry it out
For Next.js Pages Router, the latest
7.0.2won't work because [material-nextjs] Add option to enable CSS layers for pages router #45596 is not released yet, so please use the build below:For App Router, the latest version
7.0.2should work.