Material UI + Tailwind CSS: reference

Layer order (v4)

@layer theme, base, mui, components, utilities;
@import 'tailwindcss';

Pages Router + GlobalStyles (first child of AppCacheProvider):

<GlobalStyles styles="@layer theme, base, mui, components, utilities;" />

VS Code settings.json (IntelliSense for slotProps)

{
  "tailwindCSS.experimental.classRegex": [["className\\s*:\\s*['\"]([^'\"]*)['\"]"]]
}

From Tailwind CSS v4 integration—Tailwind CSS IntelliSense for VS Code.

v3 tailwind.config.js sketch

module.exports = {
  corePlugins: {
    preflight: false,
  },
  important: '#__next', // or '#root' for Vite
  // ...
};

See Interoperability—Tailwind CSS v3.

Related skills

• material-ui-nextjs: AppRouterCacheProvider, enableCssLayer, Pages emotionCache
• material-ui-theming: cssVariables: true for --mui-* token bridging