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
+    <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">
-      className={`${APP_CONTAINER} relative z-10 flex items-center justify-center gap-1 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,
         )}
       >

lib/layout.ts

@@ -1,22 +1,2 @@
-const pad = "px-4 sm:px-6 lg:px-8";
+/** @deprecated 宽度类已移至各组件内完整书写，避免 Tailwind 漏扫 */
-
+export type ContentShellWidth = "default" | "narrow" | "wide";
-/** 内容区宽度档位（带鱼屏居中，两侧留空） */
-export const CONTENT_SHELL = {
-  /** 常规页：约 896px */
-  default: `w-full max-w-4xl ${pad}`,
-  /** 首页、文章：约 768px */
-  narrow: `w-full max-w-3xl ${pad}`,
-  /** 双栏测算：约 960px */
-  wide: `w-full max-w-[960px] ${pad}`,
-} as const;
-
-export type ContentShellWidth = keyof typeof CONTENT_SHELL;
-
-/** 页眉 / 页脚 — 与最宽内容区对齐 */
-export const APP_CONTAINER = `mx-auto ${CONTENT_SHELL.wide}`;
-
-/** @deprecated 使用 PageShell width="narrow" */
-export const HOME_CONTAINER = `mx-auto ${CONTENT_SHELL.narrow}`;
-
-/** 双栏测算工作区 */
-export const MODE_CONTAINER = `mx-auto ${CONTENT_SHELL.wide}`;

tailwind.config.ts

@@ -1,7 +1,12 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   darkMode: ["class"],
-  content: ["./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}"],
+  content: [
+    "./app/**/*.{ts,tsx}",
+    "./components/**/*.{ts,tsx}",
+    "./lib/**/*.{ts,tsx}",
+  ],
+  safelist: ["max-w-3xl", "max-w-4xl"],
   theme: {
     container: {
       center: true,