MaterialUI + TailwindCSS: 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;" />

VSCode settings.json (IntelliSense for slotProps)

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

From TailwindCSS v4 integration—TailwindCSS IntelliSense for VSCode.

v3 tailwind.config.js sketch

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

See Interoperability—TailwindCSS v3.

Related skills

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