Fix ultrawide layout: Tailwind was not generating max-width classes.

Move width utilities into scanned components as literal class names, add lib to Tailwind content and safelist. Verified max-w-4xl in build CSS and /learn HTML.

Co-authored-by: Cursor <cursoragent@cursor.com>

components/footer.tsx

@@ -1,15 +1,14 @@
 import React from "react";
 import { VERSION } from "@/lib/constant";
-import { APP_CONTAINER } from "@/lib/layout";
 
 function Footer() {
   return (
-    <footer
-      className={`${APP_CONTAINER} relative z-10 flex items-center justify-center gap-1 py-4 text-xs text-muted-foreground/80`}
-    >
-      <span className="italic">心诚则灵</span>
-      <span className="text-muted-foreground/60">·</span>
-      <span>知命阁 v{VERSION}</span>
+    <footer className="relative z-10 flex items-center justify-center gap-1 border-t border-border/40 bg-card/70 py-4 text-xs text-muted-foreground/80">
+      <div className="mx-auto flex w-full max-w-4xl items-center justify-center gap-1 px-4 sm:px-6 lg:px-8">
+        <span className="italic">心诚则灵</span>
+        <span className="text-muted-foreground/60">·</span>
+        <span>知命阁 v{VERSION}</span>
+      </div>
     </footer>
   );
 }

components/header.tsx

@@ -3,7 +3,10 @@ import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { TaijiIcon } from "@/components/svg/taiji";
 import { ModeToggle } from "@/components/mode-toggle";
-import { APP_CONTAINER } from "@/lib/layout";
+
+/** 与 PageShell 同宽 — 类名须完整书写供 Tailwind 扫描 */
+const HEADER_INNER =
+  "mx-auto w-full max-w-4xl px-4 sm:px-6 lg:px-8";
 
 const NAV_ITEMS = [
   { href: "/learn", label: "易经学习" },
@@ -37,7 +40,7 @@ export default function Header() {
   return (
     <header className="relative z-10 border-b border-border/40 bg-card/70 py-3 shadow-sm backdrop-blur-md">
       <div
-        className={`${APP_CONTAINER} grid grid-cols-[1fr_auto] items-center gap-y-2 sm:flex sm:justify-between`}
+        className={`${HEADER_INNER} grid grid-cols-[1fr_auto] items-center gap-y-2 sm:flex sm:justify-between`}
       >
         <Link href="/" className="flex items-center gap-2">
           <TaijiIcon />

components/page-shell.tsx

@@ -1,12 +1,17 @@
 import Header from "@/components/header";
 import Footer from "@/components/footer";
 import TaijiBackdrop from "@/components/layout/taiji-backdrop";
-import {
-  CONTENT_SHELL,
-  type ContentShellWidth,
-} from "@/lib/layout";
 import { cn } from "@/lib/utils";
 
+/** 必须在组件内写完整类名，Tailwind 才能生成对应 CSS */
+const SHELL_WIDTH = {
+  default: "w-full max-w-4xl px-4 sm:px-6 lg:px-8",
+  narrow: "w-full max-w-3xl px-4 sm:px-6 lg:px-8",
+  wide: "w-full max-w-4xl px-4 sm:px-6 lg:px-8",
+} as const;
+
+export type ContentShellWidth = keyof typeof SHELL_WIDTH;
+
 export default function PageShell({
   children,
   className = "",
@@ -23,7 +28,7 @@ export default function PageShell({
       <main
         className={cn(
           "mx-auto flex w-full flex-1 flex-col border-border/40 bg-background sm:border-x",
-          CONTENT_SHELL[width],
+          SHELL_WIDTH[width],
           className,
         )}
       >