Tailwind CSS 不适用于 Next 14.0.2 中的 Material UI

问：

我正在使用带有 Material UI 和 Tailwind CSS 的 Next 14.0.2 进行前端开发。 目前，我在样式组件方面遇到了一些问题。 我设置按钮以使用 Link（next/link） 组件导航到注册表单。

<Link
  href={"/user/register"}
  className="transition-all text-gray-200 hover:text-white"
>
  Register
</Link>

当我单击该按钮时，它将导航到“注册”页面。但是当我使用 Link 导航时，注册页面不会编译所有 Tailwind CSS 样式，尤其是边距样式，例如 my-2、mx-4 等。在这里，您可以查看随附的第一张屏幕截图。 但是当我通过在浏览器上指定页面 URL 直接转到“注册”页面或在导航后刷新页面时，它的工作方式如第 2 个屏幕截图所示。

当我通过单击链接组件导航到注册页面时，它也应该起作用，而不仅仅是直接转到页面 URL。这是我在注册页面的一些代码。

<TextField
   label="First Name"
   variant="outlined"
   className="w-full md:w-44 my-2"
   {...register("firstName")}
   error={errors.firstName ? true : false}
   helperText={errors.firstName?.message}
 />

 <TextField
  label="Middle Name"
  variant="outlined"
  className="w-full md:w-40 md:mx-4 my-2"
  {...register("middleName")}
  error={errors.middleName ? true : false}
  helperText={errors.middleName?.message}
/>

<TextField
  label="Last Name"
  variant="outlined"
  className="w-full md:w-44 my-2"
  {...register("lastName")}
  error={errors.lastName ? true : false}
  helperText={errors.lastName?.message}
/>

这是我tailwind.config.ts文件

import type { Config } from "tailwindcss";

const config: Config = {
  content: [
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/client/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      backgroundImage: {
        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
        "gradient-conic":
          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
      },
    },
  },
  plugins: [],
};

export default config;

为了更好地理解，我分享了 CodeSandbox 链接。https://codesandbox.io/p/sandbox/relaxed-jang-5vhkd4

希望获得有关此问题的帮助。