Next.js+Tailwind访问不存在页面时出现颜色反转问题

算力阿峰

2026-6-18

问题描述

我正在使用Next.js（14.2.8版本）和Tailwind CSS（3.4.1版本）开发网站，尚未创建自定义404页面，但访问不存在的页面时，整个页面颜色会反转，而非仅显示404 error，每次触发该场景都会出现此异常。

正常白色背景布局
正常白色背景布局图

404错误时的黑色背景异常布局
404错误时的黑色背景异常布局图

我不确定该问题的产生原因，希望能获得解决指导，同时疑问这是否与Next.js默认404页面的设置或行为有关？

解决指导

1. 问题根源确认

这个异常确实和Next.js默认404页面的内置样式有关。默认404页面会加载Next.js自带的基础样式，其中包含背景色、文本颜色的默认设置，当你的全局Tailwind样式优先级不足以覆盖这些设置时，就会出现颜色反转的冲突。

2. 最直接解决：创建自定义404页面

完全接管404页面的样式是最稳妥的方案：

App Router项目：在app目录下创建not-found.tsx文件
Pages Router项目：在pages目录下创建404.js文件

示例代码（App Router）：

import '@/styles/globals.css'; // 引入你的全局样式文件

export default function NotFound() {
  return (
    <div className="min-h-screen bg-white text-black">
      <div className="container mx-auto py-16 text-center">
        <h1 className="text-5xl font-bold mb-6">404</h1>
        <p className="text-xl mb-8">页面不存在</p>
        <a href="/" className="text-blue-600 hover:underline">返回首页</a>
      </div>
    </div>
  );
}

自定义页面会完全继承你的全局样式，彻底避免默认样式冲突。