{% raw %}
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:
1. **Client-side applications (Vite/SPA)**:
```tsx
import { StyledEngineProvider } from '@mui/material/styles';
import GlobalStyles from '@mui/material/GlobalStyles';
ReactDOM.createRoot(document.getElementById('root')!).render(
{/* Your app */}
,
);
```
2. **Next.js App Router**:
```tsx
import { AppRouterCacheProvider } from '@mui/material-nextjs/v15-appRouter';
import GlobalStyles from '@mui/material/GlobalStyles';
export default function RootLayout() {
return (
{/* Your app */}
);
}
```
3. **Next.js Pages Router**:
```tsx
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 (
);
}
```
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.
{% endraw %}