[docs] Create NextJS 14 example with Tailwind CSS #39883
Conversation
Adding an example on how to use NextJS 14 with Material UI and Tailwind CSS, which also fixes the FOUC when overriding Material UI styles with Tailwind on SSR and client.
Netlify deploy previewhttps://deploy-preview-39883--material-ui.netlify.app/ Bundle size report |
orafaelfragoso
changed the title
|
@oliviertassinari As we discussed on Twitter. I'm just not sure how to add labels to the PR though. |
|
Thanks for creating the example. Don't we need the |
Yes. It's all inside |
|
I can't see anywhere this code: https://github.com/mui/material-ui/blob/master/examples/material-ui-nextjs-ts/src/components/ThemeRegistry/EmotionCache.tsx this is why I asked. |
|
@mnajdova Added the emotion cache as asked. Sorry the delay. |
| @@ -9,6 +9,12 @@ import ChevronRightRoundedIcon from '@mui/icons-material/ChevronRightRounded'; | |||
| import CloudRoundedIcon from '@mui/icons-material/CloudRounded'; | |||
|
|
|||
| const examples = [ | |||
| { | |||
| name: 'Next.js 14', | |||
There was a problem hiding this comment.
I think we should be specific about this to avoid confusion
| name: 'Next.js 14', | |
| name: 'Next.js 14 with Tailwind CSS', |
There was a problem hiding this comment.
Maybe this example shouldn't be the first one on the list? It makes more sense to me for the examples without Tailwind to come first.
| As of Next.js 13.4, the newer App Router pattern is stable. | ||
|
|
||
| The project uses [Next.js](https://github.com/vercel/next.js), which is a framework for server-rendered React apps. | ||
| It includes `@mui/material` and its peer dependencies, including [Emotion](https://emotion.sh/docs/introduction), the default style engine in Material UI v5. |
There was a problem hiding this comment.
Can you add another line explaining that Tailwind CSS is also properly configured to work with Material UI?
|
|
||
| export function MuiProvider({ children }: MuiProviderProps) { | ||
| return ( | ||
| <NextAppDirEmotionCacheProvider options={{ key: 'mui' }}> |
There was a problem hiding this comment.
Please replace it with https://mui.com/material-ui/integrations/nextjs/#configuration
|
This would close #40802. However, since this PR has been open for a while and we now point to |
Adding an example on how to use NextJS 14 with Material UI and Tailwind CSS, which also fixes the FOUC when overriding Material UI styles with Tailwind on SSR and client.