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>