Currently, I am working with Next 14.0.2 alongside Material UI and Tailwind CSS for my Frontend development tasks. However, I've run into some challenges regarding styling components. One specific issue I faced was when setting a button to navigate to the sign-up form using the Link (next/link) component.
https://i.sstatic.net/IOEEj.png
https://i.sstatic.net/xLTR2.png
<Link
href={"/user/register"}
className="transition-all text-gray-200 hover:text-white"
>
Register
</Link>
Upon clicking the button, it successfully navigated me to the Register page. However, I noticed that when navigating using the Link component, the Register page did not render all Tailwind CSS styles, particularly margin styles like my-2, mx-4, and so on. This behavior can be observed in the first screenshot attached below. On the other hand, if I directly visit the Register page by typing the URL in the browser or refreshing the page after navigation, everything renders correctly as shown in the second screenshot.
The desired outcome is for the Register page to fully compile all Tailwind CSS styles even when accessed via the Link component, not just when visited directly through the URL input. Below is a snippet 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}
/>
Additionally, here is an excerpt from 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;
To provide better context, I have shared a link to the CodeSandbox showcasing this issue: https://codesandbox.io/p/sandbox/relaxed-jang-5vhkd4
If anyone could offer their assistance on resolving this encountered issue, it would be greatly appreciated.