-
Notifications
You must be signed in to change notification settings - Fork 29k
Closed
Documentation
Copy link
Labels
DepthDocumentation issue which refers to a need for a deeper explanation, or precisionDocumentation issue which refers to a need for a deeper explanation, or precisionDocumentationRelated to Next.js' official documentation.Related to Next.js' official documentation.Not FoundRelated to the not-found.tsx file or the notFound() function.Related to the not-found.tsx file or the notFound() function.
Description
Link to the code that reproduces this issue
https://github.com/kylemh/reproduce-global-not-found-issue
To Reproduce
-
pnpx creat-next-app@latest reproduce-global-not-found-issue
-
"Yes" to everything
-
Create
src/app/global-not-found.tsx
and define it:
export const metadata = {
title: '404 — Not Found',
description: 'The page you are looking for does not exist.',
};
export default function GlobalNotFound() {
return (
<html lang="en">
<body>
<div className="flex h-dvh w-full flex-col">
<main className="flex h-full w-full flex-col items-center justify-center gap-4 p-5">
<h2 className="text-foreground/75 text-2xl font-bold">404 — Page Not Found!</h2>
</main>
</div>
</body>
</html>
);
}
- Define next.config.ts with experimental config:
import type { NextConfig } from 'next';
const nextConfig: NextConfig = {
experimental: {
globalNotFound: true,
},
};
export default nextConfig;
- Start dev server and navigate to localhost:3000/yabba-dabba-doo and see page without any Tailwind CSS applied
Current vs. Expected behavior
Current: Documentation doesn't suggest a need to import CSS nor do Tailwind CSS classes work out-of-the-box with global-not-found.tsx files
Expected: Either update documentation to make this workaround official or please make it so that Tailwind CSS works without extra code.
Provide environment information
Operating System:
Platform: darwin
Arch: arm64
Version: Darwin Kernel Version 24.5.0: Tue Apr 22 19:54:49 PDT 2025; root:xnu-11417.121.6~2/RELEASE_ARM64_T6000
Available memory (MB): 32768
Available CPU cores: 10
Binaries:
Node: 22.13.0
npm: 10.9.2
Yarn: N/A
pnpm: 10.10.0
Relevant Packages:
next: 15.4.5 // Latest available version is detected (15.4.5).
eslint-config-next: 15.4.5
react: 19.1.0
react-dom: 19.1.0
typescript: 5.9.2
Next.js Config:
output: N/A
Which area(s) are affected? (Select all that apply)
Not Found
Which stage(s) are affected? (Select all that apply)
next start (local), Vercel (Deployed), next build (local), next dev (local), Other (Deployed)
Additional context
No response
Metadata
Metadata
Assignees
Labels
DepthDocumentation issue which refers to a need for a deeper explanation, or precisionDocumentation issue which refers to a need for a deeper explanation, or precisionDocumentationRelated to Next.js' official documentation.Related to Next.js' official documentation.Not FoundRelated to the not-found.tsx file or the notFound() function.Related to the not-found.tsx file or the notFound() function.