From 26ccecb3611903663979d9cdec91002487d018c3 Mon Sep 17 00:00:00 2001
From: dekun <dekun@local>
Date: Thu, 11 Jun 2026 00:38:00 +0800
Subject: [PATCH] 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     | 13 ++++++-------
 components/header.tsx     |  7 +++++--
 components/page-shell.tsx | 15 ++++++++++-----
 lib/layout.ts             | 24 ++----------------------
 tailwind.config.ts        |  7 ++++++-
 5 files changed, 29 insertions(+), 37 deletions(-)

diff --git a/components/footer.tsx b/components/footer.tsx
index 9b79204..2c44891 100644
--- a/components/footer.tsx
+++ b/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>
   );
 }
diff --git a/components/header.tsx b/components/header.tsx
index 44ea84d..1b18879 100644
--- a/components/header.tsx
+++ b/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 />
diff --git a/components/page-shell.tsx b/components/page-shell.tsx
index 01a84b8..840dd5e 100644
--- a/components/page-shell.tsx
+++ b/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,
         )}
       >
diff --git a/lib/layout.ts b/lib/layout.ts
index 2bf65e1..01ab216 100644
--- a/lib/layout.ts
+++ b/lib/layout.ts
@@ -1,22 +1,2 @@
-const pad = "px-4 sm:px-6 lg:px-8";
-
-/** 内容区宽度档位（带鱼屏居中，两侧留空） */
-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}`;
+/** @deprecated 宽度类已移至各组件内完整书写，避免 Tailwind 漏扫 */
+export type ContentShellWidth = "default" | "narrow" | "wide";
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 2f4182c..94e70d0 100644
--- a/tailwind.config.ts
+++ b/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,