Skip to content

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

Open
joelng25/material-ui
#1
#49604
Open
[material-ui] Add an example project with Next.js (App Router) and Tailwind CSS#40802
joelng25/material-ui
#1
#49604
Labels
examplesRelating to /examples.nextjsready to takeHelp wanted. Guidance available. There is a high chance the change will be acceptedscope: all componentsWidespread work has an impact on almost all components.waiting for 👍Waiting for upvotes. Open for community feedback and needs more interest to be worked on.

Description

@mostafa-rio
mostafa-rio
opened on 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

Activity

  1. mostafa-rio
    added
    status: waiting for maintainerThese issues haven't been looked at yet by a maintainer.
    on Jan 27, 2024
  2. danilo-leal
    changed the title [-]Example project configuration for nextjs 14, mui, and Tailwind CSS[/-] on Jan 29, 2024
  3. danilo-leal
    added
    package: material-ui
    examplesRelating to /examples.
    nextjs
    waiting for 👍Waiting for upvotes. Open for community feedback and needs more interest to be worked on.
    and removed
    status: waiting for maintainerThese issues haven't been looked at yet by a maintainer.
    on Jan 29, 2024

  4. danilo-leal commented on Jan 29, 2024

    @danilo-leal
    danilo-leal
    on Jan 29, 2024
    Collaborator

    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!

  5. mostafa-rio commented on Feb 3, 2024

    @mostafa-rio
    mostafa-rio
    on Feb 3, 2024
    Author

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

  6. wmtrinu commented on Feb 4, 2024

    @wmtrinu
    wmtrinu
    on Feb 4, 2024

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

  7. wmtrinu commented on Feb 4, 2024

    @wmtrinu
    wmtrinu
    on Feb 4, 2024

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

  8. mostafa-rio commented on Feb 5, 2024

    @mostafa-rio
    mostafa-rio
    on Feb 5, 2024
    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.

  9. ZeeshanTamboli
    added
    ready to takeHelp wanted. Guidance available. There is a high chance the change will be accepted
    on May 20, 2024
  10. siriwatknp
    changed the title [-][material-ui] Add an example project with Next.js 14 (App Router) and Tailwind CSS[/-] on May 16, 2025
  11. oliviertassinari
    added
    scope: all componentsWidespread work has an impact on almost all components.
    and removed
    package: material-ui
    on Aug 16, 2025

  12. DevLikhith5 commented on Jun 5, 2026

    @DevLikhith5
    DevLikhith5
    on Jun 5, 2026

    I'd like to work on this. Planning to create a material-ui-nextjs-tailwind-ts example with App Router, MUI v6, and Tailwind CSS v4 using CSS layers for proper CssBaseline integration.

  13. joelng25 commented on Oct 28, 2026

    @joelng25
    joelng25
    on Oct 28, 2026

    Is this still open for contributions? I would like to pick it up, building on #40906 and #39883.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    examplesRelating to /examples.nextjsready to takeHelp wanted. Guidance available. There is a high chance the change will be acceptedscope: all componentsWidespread work has an impact on almost all components.waiting for 👍Waiting for upvotes. Open for community feedback and needs more interest to be worked on.

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions