Tailwind CSS doesn't work with Material UI in Next 14.0.2

I'm using Next 14.0.2 with Material UI and Tailwind CSS for the Frontend development. Currently I'm facing some issues with styling components. I set the button to navigate to the sign up form using Link(next/link) component.

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

When I click the button, it is navigated to Register page. But when I navigate using Link, the Register page doesn't compile all Tailwind CSS styles specially margin styles like my-2, mx-4 and so on. Here you can take a look at the 1st screenshot attached. But when I go to Register page directly by specifying page URL on the browser or refresh the page after it is navigated, it worked as the 2nd screenshot shows.

It should also work when I navigate to the register page by clicking Link component, not only directly going to the page URL. Here is some of my code for the register page.

<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}
/>

And this is my tailwind.config.ts file

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;

I've shared the CodeSandbox link for the better understanding. https://codesandbox.io/p/sandbox/relaxed-jang-5vhkd4

Would like to get help with this issue encountered.

It is now resolved. I wrapped the theme with <StyledEngineProvider injectFirst>{children}</StyledEngineProvider>