I made portfolio website using nextjs my website is working fine in localhost but on production components where i used tailwind css are spreading or are not intact. for e.g here is my code for nav bar where i used tailwind css
import { useRouter } from "next/router";
import { Bars3Icon } from "@heroicons/react/16/solid";
import React from "react";
interface NavLinkProps {
onClick: () => void;
children: React.ReactNode; // Explicitly define the children prop
}
interface Props {
openNav: () => void;
}
const Nav: React.FC<Props> = ({ openNav }) => {
const router = useRouter(); // useRouter hook to access router information
// Function to handle smooth scrolling to the anchor
const scrollToSection = (id: string): void => {
const element = document.getElementById(id);
if (element) {
element.scrollIntoView({ behavior: "smooth" });
}
};
return (
<div className="w-full fixed z-50 top-0 h-[12vh] bg-[#141c27] shadow-md">
<div className="flex justify-between w-[85%] mx-auto h-[100%] items-center">
<h1 className="flex-[0.6] cursor-pointer text-[30px] text-white font-bold">
SHUBHAM
<span className="text-yellow-300"> BHATT</span>
</h1>
<div className="flex space-x-6">
<NavLink onClick={() => scrollToSection("home")}>HOME</NavLink>
<NavLink onClick={() => scrollToSection("about")}>ABOUT</NavLink>
<NavLink onClick={() => scrollToSection("projects")}>PROJECTS</NavLink>
<NavLink onClick={() => scrollToSection("skills")}>SKILLS</NavLink>
<NavLink onClick={() => scrollToSection("contact")}>CONTACT</NavLink>
</div>
<div onClick={openNav}>
<Bars3Icon className="w-[2rem] md:hidden h-[2rem] cursor-pointer text-yellow-300" />
</div>
</div>
</div>
);
};
const NavLink: React.FC<NavLinkProps> = ({ onClick, children }) => {
return (
<span className="nav-link text-white" onClick={onClick}>
{children}
</span>
);
};
export default Nav;
now here is my education tab, where i used both styled component and tailwind css
style component is intact on production but i used tailwind in heading, it is not showing in production
import React from "react";
import styled from "styled-components";
import {
Timeline,
TimelineItem,
TimelineSeparator,
TimelineConnector,
TimelineDot,
} from "@mui/lab";
const Container = styled.div`
background-color: #121121;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 0px 30px 0px 0px; /* Adjust padding as needed */
@media (max-width: 960px) {
padding: 0px;
margin: 0px;
}
`;
const Wrapper = styled.div`
display: flex;
justify-content: center;
align-items: center;
width: 100%;
max-width: 1350px;
padding: 40px 0px 0px 0px;
`;
const Title = styled.h1`
font-size: 36px;
text-align: center;
font-weight: 600;
color: #f0e68c;
margin-bottom: 20px;
padding: 0px 0px 0px 50px;
`;
const TimelineSection = styled.div`
width: 60%;
@media (max-width: 660px) {
width: 100%;
}
`;
const EducationCard = styled.div`
background-color: #121121;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
margin-bottom: 30px;
width: 90%;
max-width: 800px;
display: flex;
flex-direction: row; /* Changed to column */
align-items: flex-start; /* Changed to flex-start */
gap: 20px;
transition: all 0.3s ease;
&:hover {
transform: translateY(-5px);
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}
outline: 2px solid #854CE6;
@media (max-width: 768px) {
padding; 10px;
}
`;
const Image = styled.img`
width: 100px;
height: 100px;
object-fit: cover;
border-radius: 8px; /* Changed border-radius */
margin-right: 20px; /* Added margin-right */
@media (max-width: 768px) {
width: 50px;
height: 50px;
}
`;
const Content = styled.div`
display: flex;
flex-direction: column;
gap: 8px;
color: #fff; /* Changed text color */
`;
const School = styled.h3`
font-size: 20px;
margin: 0; /* Removed margin */
@media (max-width: 768px) {
font-size: 16px;
}
`;
const Date = styled.p`
font-size: 16px;
margin: 0; /* Removed margin */
@media (max-width: 768px) {
font-size: 12px;
}
`;
const Grade = styled.p`
font-size: 16px;
margin: 0; /* Removed margin */
@media (max-width: 768px) {
font-size: 12px;
}
`;
const Degree = styled.p`
font-size: 16px;
margin: 0; /* Removed margin */
@media (max-width: 768px) {
font-size: 12px;
}
`;
const Description = styled.p`
font-size: 16px;
color: grey;
@media (max-width: 768px) {
font-size: 12px;
}
`;
const EducationPage: React.FC = () => {
const education = [
{
id: 0,
img: "https://www.namastedehradun.com/wp-content/uploads/2016/06/Graphic_Era_Hill_University_Logo-300x300.png",
school: "Graphic Era Hill University, Dehradun",
date: "Sept 2021 - July 2025",
grade: "8.17 CGPA",
desc: "I am currently pursuing a Bachelor's degree in Computer Science and Engineering at Graphic Era Hill University Dehradun Uttarakhand. I am currently in 3rd year. I have taken courses in Data Structures, Algorithms, Object-Oriented Programming, Database Management Systems, Operating Systems, and Computer Networks, among others.",
degree:
"Bachelor of Technology - BTech, Computer Science and Engineering",
},
{
id: 1,
img: "/images/aps.png",
school: "Genl BC Joshi Army Public School Pithoragarh",
date: "Apr 2019 - Apr 2020",
grade: "91.6%",
desc: "I completed my class 12 from General BC Joshi Army Public School Pithoragarh with subjects Physics, Chemistry, Maths and Computer Science",
degree: "CBSE(XII), Science with Computer",
},
{
id: 2,
img: "/images/dbs.jpeg",
school: "Don Bosco Sr Sec School Pithoragarh",
date: "Apr 2017 - Apr 2018",
grade: "82.5%",
desc: "I completed my class 10 education at Don Bosco Sr Sec School Pithoragarh, where I studied Science, Social Science, Mathematics, English, Hindi and Computer Science",
degree: "CBSE(X), Science with Computer",
},
];
return (
<Container id="education">
<h1 className="heading">
EDU<span className="text-yellow-400">CATION</span>
</h1>
<Wrapper>
<TimelineSection>
<Timeline>
{education.map((edu, index) => (
<TimelineItem key={edu.id}>
<EducationCard>
<Image src={edu.img} alt={edu.school} />
<Content>
<School>{edu.school}</School>
<Degree>{edu.degree}</Degree>
<Date>{edu.date}</Date>
<Grade>{edu.grade}</Grade>
<Description>{edu.desc}</Description>
</Content>
</EducationCard>
{index !== education.length && (
<TimelineSeparator>
<TimelineDot
variant="outlined"
color="secondary"
sx={{ position: "relative", top: "-10px", left: "15px" }}
/>
<TimelineConnector
style={{
background: "#854CE6",
marginLeft: "20px",
marginTop: "-10px",
marginBottom: "30px",
}}
/>
</TimelineSeparator>
)}
</TimelineItem>
))}
</Timeline>
</TimelineSection>
</Wrapper>
</Container>
);
};
export default EducationPage;
what can be the solution??
Link to github repo(for full code) - https://github.com/shubhambhatt037/my-portfolio link to production site - https://my-portfolio-chi-liart-87.vercel.app/
i hope, I can get some help Thank You
Your project structure contains:
•/
├── Components/ <-- uppercase
├── ...
├── ...
With a capital C in components... while in your tailwind.config.ts:
content: [
"./app/**/*.{js,ts,jsx,tsx,mdx}",
"./pages/**/*.{js,ts,jsx,tsx,mdx}",
"./components/**/*.{js,ts,jsx,tsx,mdx}", // <-- lowercase
// ...
],
Your globals.css:
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap'); // <-- should come after tailwind
@tailwind base;
@tailwind components;
@tailwind utilities;
Nextjs uses server-side rendering, so styled-components will load lazily.
npm install --save-dev babel-plugin-styled-componentsAdd a .babelrc file in your root directory:
{
"presets": ["next/babel"],
"plugins": [["styled-components", { "ssr": true }]]
}
I believe you also might need to add this to your next config:
compiler: {
styledComponents: true,
},
(but that might seemingly be only with the App router, and you're using pages)
References: