问题背景
在使用 MUI（Material-UI）的 Modal 组件时，我发现尝试添加的 Tailwind CSS className 并没有生效。这让我有些困扰，于是我开始深入探索这个问题。
原因分析
经过一番调查，我找到了问题的关键。原来，MUI 的 Modal 组件默认是挂在 HTML body 元素下面的，而在 Next.js 框架中，内容实际上是放在一个名为 "__next" 的 div 元素中的。这意味着，Modal 组件实际上并没有在 Next.js 的上下文中。
同时，我注意到我的 tailwind.config.js 文件中设置了
important: ‘__next’ 字段。由于这个设置，Tailwind CSS 在生成 className 时会将其限制在 "__next" 元素中。这也就是为什么在 MUI Modal 组件上使用这些 className 会失效的原因——因为它们实际上并没有作用在 Next.js 的上下文中。解决办法
理解了问题的原因后，解决办法也就呼之欲出了。我需要将 MUI Modal 组件的 container 设置为 Next.js 的 "__next" 元素。这样，Modal 就会在 Next.js 的上下文中，从而使得 Tailwind CSS className 能够在其上生效。
具体操作方法是在 MUI Modal 组件的属性中添加一行代码：
container={() => document.querySelectById(__next)}。这样一来，Modal 就会挂在 "__next" 元素上，从而可以正常使用 Tailwind CSS 的样式类名。以上就是我如何解决 MUI Modal 和 Tailwind CSS 在 Next.js 中的兼容性问题的经历和方法。希望能对有同样困扰的开发者提供一些帮助。