Search code examples
cssnext.jstailwind-css

In NextJS while using TailwindCSS some components are taking different width

I've got 3 pages, home, cv, about.

  • cv page appears differently to other two pages, by which I mean the whole main body seems to move slightly towards left.
  • Pixel width is still the same, but I don't know exactly it differs from the original state.

The interesting thing is,

  • if I remove mx-auto in layout.tsx, the page width issue gets resolved and there comes consistency between the pages.

I think the reason is because it has some components causing the issue, but I don't know why.

Problem :

enter image description here

Folder structure :

enter image description here

layout.tsx :

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className="${inter.className} antialiased min-h-screen min-w-fit flex flex-col items-center">
        <main className="w-full pt-10 pb-80 px-8">
          <div className="max-w-[820px] mx-auto">
            <NavBar />
            {children}
          </div>
        </main>
      </body>
    </html>
  );
}

experience.tsx :

## experience.tsx
import { Skill, SkillProps, skillsDirectory
  
 } from "../icons/skill";
type ExperienceProps = {
  jobTitle: string;
  company: string;
  period: string;
  content: string | string[];
  skills?: (keyof typeof skillsDirectory)[];
}

export function Experience({jobTitle, company, period, content, skills}: ExperienceProps) {
  const renderContent = () => {
    if (Array.isArray(content)) {
      return (
        <ul className="list-disc list-inside font-light my-4">
          {content.map((item, index) => (
            <li 
              className="" 
              key={index}>
                {item}
            </li>
          ))}
        </ul>
      );
    } else {
      return <p className="font-light">{content}</p>
    }
  }
  return (
    <div className="flex flex-col md:flex-row mt-4">
      <div className="w-1/4 pt-1.5">
        <h4 className="font-light">{period}</h4>  
      </div>
      <div className="w-3/4 pt-1 px-4 rounded-xl transition-all duration-75 hover:bg-inherit hover:shadow-md ">
        <h4 className="text-lg font-light text-slate-900">{jobTitle}</h4>
        <h4 className="text-md font-thin italic text-slate-400">@ {company}</h4>
        {renderContent()}
        <div className="flex flex-wrap gap-2 mb-4">
          {skills?.map((skillKey) => (
            <Skill key={skillKey} {...skillsDirectory[skillKey]} />
          ))}
        </div>
      </div>
    </div>
  );
}

summary.tsx :

## summary.tsx
import { Skill, skillsDirectory } from "../icons/skill"
import { FaStar } from "react-icons/fa";
import { Subtitle } from "./subtitle";

const summaryWidth = 40
const summaryHeight = 40
const SkillCategory = (
  {stars, title, skills, width=summaryWidth, height=summaryHeight}: 
  {stars: number, title: string, skills: string[], width?: number, height?: number}
  ) => (
  <div className="flex-grow">
    <div className="flex flex-row">
      <div className="flex pt-1">
        {[...Array(stars)].map((_, i) => (
          <FaStar key={i} className="hover:text-yellow-800 transition-all duration-600" />
        ))}
      </div>
      <h3 className="ml-2">{title}</h3>
    </div>
    <div className="flex flex-wrap gap-2">
      {skills.map((skillKey: string) => (
        <Skill key={skillKey} {...skillsDirectory[skillKey]} width={width} height={height} />
      ))}
    </div>
  </div>
)

export function Summary() {
  const threeStars = ["python", "pytorch", "lightning", "docker", "fastapi"]
  const twoStars = ["java", "springboot", "django", "flask"]
  const oneStar = ["typescript", "nextjs", "tailwindcss"]

  return <>
    <Subtitle subtitle="Summary"/>
    <div className="flex flex-wrap gap-2">
      <SkillCategory stars={3} title="Professionally, frequently" skills={threeStars} />
      <SkillCategory stars={2} title="Professionally, Occationally" skills={twoStars} />
      <SkillCategory stars={1} title="Personally developed" skills={oneStar} />
    </div>
  </>
}
Solution

  • Okay, I've got an answer from my colleague...

    This is really simple one which doesn't have to be related to tailwind css or NextJS.

    The issue occurred because of a scroll bar which appeared on cv page for its lengthy content.

    The solution I am suggested is to force all pages to have a scroll bar, which normally wouldn't be a problem due to consistency in lengthy contents over all pages.