When integrating Material UI with other styling solutions like Tailwind CSS v4, proper configuration of CSS layers is essential to ensure correct style precedence and override behavior.
When integrating Material UI with other styling solutions like Tailwind CSS v4, proper configuration of CSS layers is essential to ensure correct style precedence and override behavior.
Follow these framework-specific steps to enable and configure CSS layers:
import { StyledEngineProvider } from '@mui/material/styles';
import GlobalStyles from '@mui/material/GlobalStyles';
ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode>
<StyledEngineProvider enableCssLayer>
<GlobalStyles styles="@layer theme, base, mui, components, utilities;" />
{/* Your app */}
</StyledEngineProvider>
</React.StrictMode>,
);
import { AppRouterCacheProvider } from '@mui/material-nextjs/v15-appRouter';
import GlobalStyles from '@mui/material/GlobalStyles';
export default function RootLayout() {
return (
<html lang="en" suppressHydrationWarning>
<body>
<AppRouterCacheProvider options=>
<GlobalStyles styles="@layer theme, base, mui, components, utilities;" />
{/* Your app */}
</AppRouterCacheProvider>
</body>
</html>
);
}
import { AppCacheProvider } from '@mui/material-nextjs/v15-pagesRouter';
import GlobalStyles from '@mui/material/GlobalStyles';
export default function MyApp(props: AppProps) {
const { Component, pageProps } = props;
return (
<AppCacheProvider {...props}>
<GlobalStyles styles="@layer theme, base, mui, components, utilities;" />
<Component {...pageProps} />
</AppCacheProvider>
);
}
Always ensure that the mui layer comes before the utilities layer so that utility classes can properly override Material UI styles without using the !important directive.
Enter the URL of a public GitHub repository