React+Next.js+Tailwind CSS组件在缩放或iPad Air设备上出现额外边框问题求助

大家好，我遇到个挺棘手的问题——我的组件在页面缩放时，或者在iPad Air这类设备上查看时，边框会出现额外的线条，有种双边框的效果，实在搞不懂哪里出问题了。

下面是我这个组件的代码（基于React + Next.js + Tailwind CSS）：

return (
  <div className="space-y-8 sm:space-y-12 py-6 sm:py-12 mb-12 lg:mb-0">
    <div className="flex flex-col items-end relative">
      <FadeText
        text="Catégories"
        direction="right"
        className="text-4xl md:text-6xl lg:text-8xl font-extrabold tracking-tight"
      />
      <Link
        href="/produits/tous_les_produits"
        className="-mt-10 md:-mt-8 lg:-mt-10 text-sm font-semibold text-slate-800 hover:text-slate-600/80"
      >
        Voir tous les produits &rarr;
      </Link>
    </div>

    <div className="w-full relative">
      {/* 此处省略组件其他内容 */}
    </div>
  </div>
);

有没有大佬能帮我分析下这个双边框/额外边框的问题可能出在哪里？比如是不是Tailwind的响应式类有冲突，或者是设备像素比导致的渲染问题？

备注：内容来源于stack exchange，提问作者Valentin