I agree with this to fix the integration with Tailwind v4, keeping in mind the requirements:

• Opt-in solution
• Least breaking changes
• Small change for the codebase

I don't know if this is 100% related to the topic of the issue, but I was having some issues when using Tailwindcss v4, mui v6.4.1 and vite as a bundler, and came up with a simple solution.
I think this can save people a lot of time, because even though you create a brand new react-ts vite template project, follow all the steps listed in the tailwindcss v4 installation guide for vite and the mui style library interoperability docs, mui does not work with the new tailwind version at all.
After some time doing some research, I found that the solution is: go to the main .css file where you import tailwind styles and add a important keyword at the end. Example:

/* index.css */
@import "tailwindcss" important; /* <==== just add the important keyword */

/* other project styles */

Although simple, it is not the same as the previous important: "#root" solution which was used for tailwind v3, since now EVERY tailwindcss has a important flag attached to it, and it might conflict with some mui styles.
Maybe this information should go to the interoperability docs while the layer fix is not implemented yet?

I don't know if this is 100% related to the topic of the issue, but I was having some issues when using Tailwindcss v4, mui v6.4.1 and vite as a bundler, and came up with a simple solution. I think this can save people a lot of time, because even though you create a brand new react-ts vite template project, follow all the steps listed in the tailwindcss v4 installation guide for vite and the mui style library interoperability docs, mui does not work with the new tailwind version at all. After some time doing some research, I found that the solution is: go to the main .css file where you import tailwind styles and add a important keyword at the end. Example:

/* index.css /
@import "tailwindcss" important; / <==== just add the important keyword */

/* other project styles */
Although simple, it is not the same as the previous important: "#root" solution which was used for tailwind v3, since now EVERY tailwindcss has a important flag attached to it, and it might conflict with some mui styles. Maybe this information should go to the interoperability docs while the layer fix is not implemented yet?

@import "tailwindcss" important; worked for me as well thank you. I'm not sure what the drawbacks are but this was a huge timesaver

I don't know if this is 100% related to the topic of the issue, but I was having some issues when using Tailwindcss v4, mui v6.4.1 and vite as a bundler, and came up with a simple solution. I think this can save people a lot of time, because even though you create a brand new react-ts vite template project, follow all the steps listed in the tailwindcss v4 installation guide for vite and the mui style library interoperability docs, mui does not work with the new tailwind version at all. After some time doing some research, I found that the solution is: go to the main .css file where you import tailwind styles and add a important keyword at the end. Example:

/* index.css /
@import "tailwindcss" important; / <==== just add the important keyword */

/* other project styles */

Although simple, it is not the same as the previous important: "#root" solution which was used for tailwind v3, since now EVERY tailwindcss has a important flag attached to it, and it might conflict with some mui styles. Maybe this information should go to the interoperability docs while the layer fix is not implemented yet?

Nice! Thanks for the fix. I knew there was some way to mark layer as important, but couldn't find it on MDN somehow.

You don't have to import all of tailwindcss parts. Based on the instructions here (https://tailwindcss.com/docs/preflight), I'm doing this:

@layer theme, utilities;

@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/utilities.css" layer(utilities) important;

I just put important to the utilities layer. This seems to fix the problem. (I'm using MUI's base css styles, not tailwind's preflight)

@HasanMothaffar @mrdjohnson @Malivuca Please see this repo for proper configuration.

Repo: https://github.com/siriwatknp/mui6-tailwind4-vite
Demo: https://siriwatknp.github.io/mui6-tailwind4-vite/

Summary: set up CSS layer for Material UI to be @components to work with Tailwind CSS.

@HasanMothaffar @mrdjohnson @Malivuca Please see this repo for proper configuration.

Repo: https://github.com/siriwatknp/mui6-tailwind4-vite Demo: https://siriwatknp.github.io/mui6-tailwind4-vite/

Summary: set up CSS layer for Material UI to be @components to work with Tailwind CSS.

Wow, I've tried this solution before (as i've seen it at your issue's description), but couldn't get it to work.

By following your repository guides it worked like a charm mate. This might be the best solution available for the mui v6/tailwind v4 integration at the moment.

Thanks a lot 💯💯💯

When will the official documentation provide the tailwindcss v4 integration? Or do I need to enable an additional doc feedback?

@PunkFleet the team is working in having an easier way of integrating with Tailwind (e.g. #45428)

@aarongarciah is there a plan to also fix it in combination with Next.js? Because I have the issue even though there is the AppRouterCacheProvider the mui layer is applied last but (as mentioned already in this issue) all further extensions end up with the utilities layer.

@aarongarciah is there a plan to also fix it in combination with Next.js? Because I have the issue even though there is the AppRouterCacheProvider the mui layer is applied last but (as mentioned already in this issue) all further extensions end up with the utilities layer.

Please check the repo I provided, you need to insert mui into Tailwind CSS layer order.
https://github.com/siriwatknp/mui6-tailwind4-nextjs?tab=readme-ov-file#css-layer

@aarongarciah is there a plan to also fix it in combination with Next.js? Because I have the issue even though there is the AppRouterCacheProvider the mui layer is applied last but (as mentioned already in this issue) all further extensions end up with the utilities layer.

Please check the repo I provided, you need to insert mui into Tailwind CSS layer order. https://github.com/siriwatknp/mui6-tailwind4-nextjs?tab=readme-ov-file#css-layer

Thanks @siriwatknp
I indeed did that, but for a reason this was not working still. The problem was that my IDE (IntelliJ/WebStorm) decided to reorder the lines and put the @import above the @layer definitions. Once I've fixed the order, everything was working as expected. 🥳
(Just in case anybody is interested: This is caused by some outdated inspection in IntelliJ/WebStorm for CSS definitions and is going to be fixed with the next version. So make sure you keep the right order even if the IDE complains.)

Hey folks! I had the same issue and solved it with a simple approach. Here's what worked for me:

When using enableCssLayer: true with AppRouterCacheProvider, it creates a default layer order of mui,theme,base,components,utilities. This causes problems because Tailwind's base styles can override MUI's default styles, leading to inconsistent UI.

I created a MuiLayerOverride component that forces a better CSS layer order (theme, base, mui, components, utilities) before MUI loads its styles:

function MuiLayerOverride() {
  useEffect(() => {
    const styleElement = document.createElement("style");
    styleElement.setAttribute("id", "mui-layer-override");
    styleElement.setAttribute("data-priority", "high");
    
    styleElement.textContent = `
      @layer theme, base, mui, components, utilities;
      
      @layer mui {
        .mui-layer-override {
          --mui-layer-order-fixed: true;
        }
      }
    `;
    
    document.head.insertBefore(styleElement, document.head.firstChild);
    
    return () => document.getElementById("mui-layer-override")?.remove();
  }, []);

  return null;
}

For Next.js App Router users, make sure you're using AppRouterCacheProvider with the right options:

<AppRouterCacheProvider
  options={{
    key: "css",
    enableCssLayer: true,
  }}
>
  <ThemeProvider>
    <MuiLayerOverride /> 
    <MuiThemeProvider theme={theme}>
      {children}
    </MuiThemeProvider>
  </ThemeProvider>
</AppRouterCacheProvider>

The key parts are:

1. Setting enableCssLayer: true in the cache provider
2. Adding our MuiLayerOverride component before MUI's ThemeProvider to fix the layer order

This works because it defines a clear layer order that both MUI and Tailwind respect, and prevents MUI from changing the layer order on its own.

No more fighting with specificity or using !important everywhere. Works perfectly with Tailwind v4!

@originalai Thanks for sharing. Would it be simpler if you use GlobalStyles?

<AppRouterCacheProvider
  options={{
    key: "css",
    enableCssLayer: true,
  }}
>
  <GlobalStyles styles="@layer theme, base, mui, components, utilities;" /> 
  <ThemeProvider>
    <MuiThemeProvider theme={theme}>
      {children}
    </MuiThemeProvider>
  </ThemeProvider>
</AppRouterCacheProvider>

I think the useEffect is not required.

What is the workaround for pigment-css?

@siriwatknp