Next.jsとtailwindcssのプロジェクトでローカル環境とデプロイ環境で画面表示が異なる

実現したいこと

Next.jsとtailwindcssのプロジェクトで、デプロイを行いたいと考えています。

発生している問題・分からないこと

Vercelを用いてデプロイを行った結果、npm run devで実行しているローカル環境とはデザインが異なった画面が表示されてしまっている状態です(以下画像の上がローカル環境、下がデプロイした結果です)。

該当のソースコード

TypeScript

1<div className="hidden sm:flex sm:items-center sm:justify-center sm:gap-20 xl:gap-36 sm:h-screen sm:w-full sm:bg-custom-faf8f8">2 <div className="flex flex-col items-center justify-center gap-14 lg:gap-24 xl:gap-40">3 <div className="flex flex-col items-center justify-center gap-7 lg:gap-12 xl:gap-28">4 <div className="sm:-translate-x-7 md:-translate-x-20 lg:-translate-x-14">5 <div className="flex flex-col items-start">6 <div className="font-tsukuaoldmin text-3xl font-thiner tracking-wider lg:text-6xl xl:text-8xl">7 Welcome to 8 </div>9 </div>10 <div className="border-b border-black sm:w-52 md:w-60 lg:w-96 xl:w-100"></div>11 </div>12 <div className="translate-x-10">13 <div className="flex flex-col items-end">14 <div className="font-tsukuaoldmin text-3xl font-thin tracking-wider lg:text-6xl xl:text-8xl">15 Portfolio Site16 </div>17 <div className="border-b border-black sm:w-56 md:w-64 lg:w-96 xl:w-100"></div>18 </div>19 </div>20 </div>21 <div>22 <div className="font-thin">23 <span className="font-tsukuaoldmin sm:text-sm md:text-base lg:text-xl xl:text-4xl">24 あなたの 25 </span>26 <span className="font-tsukuaoldmin sm:text-2xl md:text-3xl lg:text-5xl xl:text-8xl">27 イメージ 28 </span>29 <span className="font-tsukuaoldmin sm:text-sm md:text-base lg:text-xl xl:text-4xl">30 が 31 </span>32 <span className="font-tsukuaoldmin sm:text-2xl md:text-3xl lg:text-5xl xl:text-8xl">33 遺産 34 </span>35 <span className="font-tsukuaoldmin sm:text-sm md:text-base lg:text-xl xl:text-4xl">36 になる。 37 </span>38 </div>39 </div>40 </div>41 <Image42 alt="ring"43 className="sm:w-52 sm:h-52 md:w-60 md:h-60 lg:w-80 lg:h-80 xl:w-97 xl:h-97"44 height={500}45 width={500}46 src="/allring.svg"47 />48 </div>

試したこと・調べたこと

上記の詳細・結果

Vercelでデプロイするのが良くないかと考え、AWSのAmplifyを用いて行いましたが、結果は同じでした。
また、プロジェクトの作成方法(tailwindcssの設定)が悪いかと考え、tailwindcssの公式ドキュメント(https://tailwindcss.com/docs/guides/nextjs)を参考に新しくプロジェクトを作成しましたが、同じ結果になりました。

補足

用いている環境は以下の通りです。
・Next.js:14.1.4
・tailwindcss:3.4.4
・使用しているパソコンはMacBookAirです(関係あるかわかりませんが、画面サイズの参考)

・また、デプロイした画面を小さくすると、ローカル環境と同じ大きさになります。(スマホサイズも同様)