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.

Sign up for GitHub

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

Jump to bottom

[docs] Documentation error: integration with tailwindcss step 3 #45019

Open
PunkFleet opened this issue Jan 14, 2025 · 7 comments
Open

[docs] Documentation error: integration with tailwindcss step 3 #45019

PunkFleet opened this issue Jan 14, 2025 · 7 comments
Assignees
@mapache-salvaje
Labels
ready to take Help wanted. Guidance available. There is a high chance the change will be accepted support: docs-feedback Feedback from documentation page

Comments

@PunkFleet
Copy link

PunkFleet commented Jan 14, 2025 •
edited by github-actions bot
Loading

Related page

https://mui.com/material-ui/integrations/interoperability/#tailwind-css

Kind of issue

Broken demo

Issue description

After creating a new nextjs project with the default options, if you want to be able to use both MUI and tailwindcss, you need to follow: https://mui.com/material-ui/integrations/nextjs/ and then to follow: https://mui.com/material-ui/integrations/interoperability/#tailwind-css

But at step 3 without adding important, it already works fine at this point. If you add the important it doesn't work.

Context

No response

Search keywords: tailwindcss nextjs
@PunkFleet PunkFleet added status: waiting for maintainer These issues haven't been looked at yet by a maintainer support: docs-feedback Feedback from documentation page labels Jan 14, 2025
@mnajdova mnajdova self-assigned this Jan 14, 2025
@mnajdova
Copy link
Member

mnajdova commented Jan 14, 2025 •
edited
Loading

You will need to add the id="root" on the body (e.g. inside app/layout.js), as next.js is no longer adding it by default. We should update the instructions. cc @samuelsycamore

@mnajdova mnajdova assigned mapache-salvaje and unassigned mnajdova Jan 14, 2025
@mnajdova mnajdova added ready to take Help wanted. Guidance available. There is a high chance the change will be accepted and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Jan 14, 2025
@PunkFleet
Copy link
Author

PunkFleet commented Jan 14, 2025 •
edited
Loading

You will need to add the id="root" on the body (e.g. inside app/layout.js), as next.js is no longer adding it by default. We should update the instructions. cc @samuelsycamore

It seems like not easy, i trying add id to html and then add important to tailwind config file, it's not working:

    <html lang="en" suppressHydrationWarning>
      <body id="root" >
        <AppRouterCacheProvider options={{ enableCssLayer: true, key: 'css', prepend: true, }}>
          <InitColorSchemeScript attribute="class" />
          <ThemeProvider theme={theme}>
          {children}
          </ThemeProvider>
        </AppRouterCacheProvider>
      </body>
    </html>

tailwind.config.ts

import type { Config } from "tailwindcss";

export default {
  corePlugins: {
    preflight: false,
  },
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  important: '#__next',
  theme: {
    extend: {
      colors: {
        background: "var(--background)",
        foreground: "var(--foreground)",
      },
    },
  },
  plugins: [],
} satisfies Config;

@mnajdova
Copy link
Member

mnajdova commented Jan 15, 2025 •
edited
Loading

Can you share a repository with the reproduction please? It would be easier to debug that way.

@PunkFleet
Copy link
Author

You will need to add the id="root" on the body (e.g. inside app/layout.js), as next.js is no longer adding it by default. We should update the instructions. cc @samuelsycamore

It's working.

<html lang="en" suppressHydrationWarning>
      <body id="__next">
        .....
      </body>
    </html>

important: '#__next',

@github-actions GitHub Actions
Copy link

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@PunkFleet How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.

@mnajdova
Copy link
Member

Reopening, as we still need to update the docs, e.g. on which root element should be used #root vs #__next, depending on the Next.js version.

@mnajdova mnajdova reopened this Jan 20, 2025
@PunkFleet
Copy link
Author

PunkFleet commented Jan 20, 2025 •
edited
Loading

Reopening, as we still need to update the docs, e.g. on which root element should be used #root vs #__next, depending on the Next.js version.

I make a repository, if it well have help. it's next v13 and it's working,
https://stackblitz.com/edit/stackblitz-starters-c9cd3iv8?file=app%2Flayout.tsx

doc is right and It's just missing the introduction of manually adding the <body id='__next'> tag, and then that I filled in the <body> tag with id='root' instead of id='__next', and I admit I was stupid and made a rookie mistake.

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

@mapache-salvaje mapache-salvaje

Labels
ready to take Help wanted. Guidance available. There is a high chance the change will be accepted support: docs-feedback Feedback from documentation page
Projects
Material UI
Status: Done
Milestone
No milestone
Development

No branches or pull requests
3 participants
@mnajdova @mapache-salvaje @PunkFleet