Skip to content

experimental global-not-found page does not have tailwind setup #82379

@kylemh

Description

@kylemh

Link to the code that reproduces this issue

https://github.com/kylemh/reproduce-global-not-found-issue

To Reproduce

  1. pnpx creat-next-app@latest reproduce-global-not-found-issue

  2. "Yes" to everything

  3. 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>
  );
}
  1. Define next.config.ts with experimental config:
import type { NextConfig } from 'next';

const nextConfig: NextConfig = {
  experimental: {
    globalNotFound: true,
  },
};

export default nextConfig;
  1. 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 precisionDocumentationRelated to Next.js' official documentation.Not FoundRelated to the not-found.tsx file or the notFound() function.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions