我建议使用parent relative div

<div class="h-screen w-screen relative">

    <!-- 404 -->
    <div class="bg-gray-900 flex justify-center items-center absolute inset-0 z-0"> // inset-0 is important
        <svg></svg>
    </div>
    
    <!-- content -->
    <div class="flex justify-center items-center absolute inset-0 z-10">
    </div>

</div>

我复制了你的设计。
我建议将H屏幕更改为min-H屏幕。
您可以在以下链接中查看使用您的代码的示例。
https://play.tailwindcss.com/eD7VEDN5AR

“width：100 vw”破坏了页面布局。页面上出现了一个水平滚动条。

这是因为w-screen属性表示“宽度：100 vw”（具有这样的属性的元素被假定为水平地消耗整个可用设备屏幕空间）。
由于页面主体（）上有一个垂直滚动条（因为主体的高度可能大于屏幕高度（= 100 vh）），所以水平空间总是小于100 vw，因为水平空间也被垂直滚动条占用。
这不是一个与TailwindCSS相关的问题，而是一个与CSS相关的bug。
垂直滚动条的宽度通常为~12像素，但它因操作系统和屏幕大小而异。
我认为如果CSS考虑滚动条宽度计算100 vw属性的可用屏幕宽度会更好，比如100 vw =真实的屏幕宽度-（垂直滚动条的宽度，* 如果存在 *）。

“（身高：100 vh//最大高度：100 vh）”正在破坏页面布局。出现垂直滚动条

这是因为w-screen属性表示“宽度：100 vw”（具有这样的属性的元素被假定为水平地消耗整个可用设备屏幕空间）。
由于页面主体（）上有一个垂直滚动条（因为主体的宽度可能大于屏幕宽度（= 100 vw）），所以垂直空间始终小于100 vh，因为垂直空间也被水平滚动条占用。
水平滚动条的宽度通常为~12像素，但因操作系统和屏幕大小而异。
对于这种情况，CSS可以计算100 vh值的属性，如100 vh =真实的屏幕高度-（水平滚动条的高度，* 如果存在 *）。
现在可以做什么：
最好使用宽度：100%和高度：100%属性代替宽度：100 vw，高度：100伏小时
使用vh和vw值总是有风险的。为什么需要这样做呢？从语义上讲，子对象应该总是小于父对象。
这与使用“overflow-x：隐藏”。
因此，您的代码应该如下所示：

import Link from "next/link";
import { useRouter } from "next/router";
import React from "react";

interface Props {}

const ErrorPage: React.FC<Props> = ({}) => {
  const router = useRouter();
  return (
    <>
      <div className="bg-gray-900 h-full w-full flex justify-center items-center absolute z-0">
        <svg
          className="p-6 lg:p-48 fill-current text-gray-300"
          viewBox="0 0 445 202"
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          stroke="currentColor"
          // viewBox="0 0 24 24"
        >
          <path
            d="M137.587 154.953h-22.102V197h-37.6v-42.047H.53v-33.557L72.36 2.803h43.125V124.9h22.102v30.053zM77.886 124.9V40.537L28.966 124.9h48.92zm116.707-23.718c0 22.46 1.842 39.643 5.525 51.547 3.684 11.905 11.23 17.857 22.64 17.857 11.411 0 18.89-5.952 22.44-17.857 3.548-11.904 5.323-29.086 5.323-51.547 0-23.54-1.775-40.97-5.324-52.29s-11.028-16.98-22.438-16.98c-11.41 0-18.957 5.66-22.64 16.98-3.684 11.32-5.526 28.75-5.526 52.29zM222.759.242c24.887 0 42.339 8.76 52.356 26.28 10.018 17.52 15.027 42.406 15.027 74.66s-5.01 57.095-15.027 74.525c-10.017 17.43-27.47 26.145-52.356 26.145-24.887 0-42.339-8.715-52.357-26.145-10.017-17.43-15.026-42.271-15.026-74.525 0-32.254 5.009-57.14 15.026-74.66C180.42 9.001 197.872.241 222.76.241zm221.824 154.711h-22.102V197h-37.6v-42.047h-77.355v-33.557l71.83-118.593h43.125V124.9h22.102v30.053zM384.882 124.9V40.537l-48.92 84.363h48.92z"
            fillRule="nonzero"
          />
        </svg>
      </div>
      <div className="h-full w-full flex justify-center items-center relative z-10">
        <div className="p-6 text-center">
          <h2 className="uppercase text-xl lg:text-5xl font-black">
            We are sorry, Page not found!
          </h2>
          <p className="mt-3 uppercase text-sm lg:text-base font-semibold text-gray-900">
            The page you are looking for might have been removed had its name
            changed or is temporarily unavailable.
          </p>
          <div className="text-center">
            <Link href="/">
              <a
                className="mt-6 m-auto bg-primary text-white py-4 px-6 w-1/3 block rounded-full tracking-wide
                font-semibold font-display focus:outline-none focus:shadow-outline hover:bg-primaryAccent
                shadow-lg transition-css"
              >
                Back To Homepage
              </a>
            </Link>

            <button
              onClick={() => router.back()}
              className="mt-6 m-auto bg-primary text-white py-4 px-6 w-1/4 block rounded-full tracking-wide
                  font-semibold font-display focus:outline-none focus:shadow-outline hover:bg-primaryAccent
                  shadow-lg transition-css"
            >
              Go Back
            </button>
          </div>
        </div>
      </div>
    </>
  );
};

export default ErrorPage;

对于TailwindCSS，您应该使用h-full and w-full而不是h-screen and w-screen。

此外，在您的特定情况下，最有可能破坏所有内容的是这一行：

<div className="h-screen w-screen flex justify-center items-center relative z-10">

因为您已经将此应用于父元素：

<div className="bg-gray-900 h-screen w-screen flex justify-center items-center absolute z-0">

你的代码在语义上都是错误的。这是一个丑陋的变通方法。
您还没有提供tailwind.config.js，因此演示中的一些颜色由于缺少自定义TailwidnCSS类名值而丢失。
但这基本上是相同的代码，除了用-full替换所有-screen属性，还删除了SVG的底部填充，因为在大多数屏幕上，SVG有太多的间距，然后消耗屏幕的〉100 vh空间，并且没有垂直定位在中心，而是在页面底部有starneg白色。
https://dpd0jl.sse.codesandbox.io/