Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[material-ui] Add an example project with Next.js 14 (App Router) and Tailwind CSS #40802

Open
mostafa-rio opened this issue Jan 27, 2024 · 5 comments
Labels
examples Relating to /examples nextjs package: material-ui Specific to @mui/material ready to take Help wanted. Guidance available. There is a high chance the change will be accepted waiting for 👍 Waiting for upvotes

Comments

@mostafa-rio
Copy link

mostafa-rio commented Jan 27, 2024

Summary

Currently, there is no example configuration for next 14 with app-router, Tailwind CSS and MUI in examples.
Also configuring MUI CssBaseline is a bit tricky if we have tailwind in our project

Examples

No response

Motivation

A full new example project also helps with this issue where people are confused with nextjs pages directory setup

Search keywords: tailwindcss nextjs 14 app-router

@mostafa-rio mostafa-rio added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Jan 27, 2024
@danilo-leal danilo-leal changed the title Example project configuration for nextjs 14, mui, and Tailwind CSS [material-ui] Add an example project with Next.js 14 (App Router) and Tailwind CSS Jan 29, 2024
@danilo-leal danilo-leal added package: material-ui Specific to @mui/material examples Relating to /examples nextjs waiting for 👍 Waiting for upvotes and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Jan 29, 2024
@danilo-leal
Copy link
Contributor

Heya @mostafa-rio, thanks for opening this issue! Having an example project to showcase how to use Material UI with these tools make sense to me — we should get there eventually. In the meantime, I've added the "waiting for 👍" so we gauge the community's need for this, helping us to prioritize it!

@mostafa-rio
Copy link
Author

mostafa-rio commented Feb 3, 2024

Thank you @danilo-leal for your response. I've created a pull request that adds an example to the examples folder.

@wmtrinu
Copy link

wmtrinu commented Feb 4, 2024

I'm also struggling with this, I'll post an update if I'm able to get it to work

@wmtrinu
Copy link

wmtrinu commented Feb 4, 2024

Well, I was able to get this to work... 🧐

@mostafa-rio
Copy link
Author

@wmtrinu you can check out the forked mui repo on my profile and find the example. I've created the pull request but faced too many conflicts. so I closed the pull request.

@ZeeshanTamboli ZeeshanTamboli added the ready to take Help wanted. Guidance available. There is a high chance the change will be accepted label May 20, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
examples Relating to /examples nextjs package: material-ui Specific to @mui/material ready to take Help wanted. Guidance available. There is a high chance the change will be accepted waiting for 👍 Waiting for upvotes
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants