chore: update TailwindCSS and opt max-w

app/contacts/page.tsx

@@ -26,14 +26,14 @@ export default function Page() {
   return (
     <div className="min-h-screen flex flex-col bg-gray-100">
       <Header />
-      <main className="container mx-auto p-4 flex-grow">
+      <main className="container mx-auto p-4 grow">
         <section className="text-center mb-12">
           <h2 className="text-4xl font-extrabold text-gray-900">联系</h2>
           <p className="text-xl text-gray-600 mt-4">以下是主要负责人的联系信息，可以点击卡片查看全部联系方式。</p>
         </section>
         <section className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
           {contacts.map((contact, index) => (
-            <div key={index} onClick={() => handleModal(contact)} className="bg-gray-50 shadow rounded-2xl p-6 text-center hover:shadow-lg transition-shadow duration-300 cursor-pointer">
+            <div key={index} onClick={() => handleModal(contact)} className="bg-gray-50 shadow-sm rounded-2xl p-6 text-center hover:shadow-lg transition-shadow duration-300 cursor-pointer">
               <h3 className="text-xl font-semibold text-gray-900">{contact.name}</h3>
               <p className="text-gray-600">{contact.describe}</p>
             </div>

app/globals.css

@@ -1,16 +1,25 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
 
-:root {
-  --background: #ffffff;
-  --foreground: #171717;
+@theme {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
+/*
+  The default border color has changed to `currentcolor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentcolor);
   }
 }
 
@@ -64,3 +73,7 @@ body {
 .transition-shadow {
   transition: box-shadow 0.3s ease-in-out;
 }
+
+.container {
+  max-width: 1200px;
+}

app/layout.tsx

@@ -1,17 +1,6 @@
 import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
 
-const geistSans = Geist({
-  variable: "--font-geist-sans",
-  subsets: ["latin"],
-});
-
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
-  subsets: ["latin"],
-});
-
 export const metadata: Metadata = {
   title: "智能计算实验室",
 };
@@ -22,8 +11,8 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en">
-      <body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>{children}</body>
+    <html lang="zh-cn" className="dark">
+      <body className="antialiased min-h-screen flex flex-col">{children}</body>
     </html>
   );
 }

app/page.tsx

@@ -5,21 +5,23 @@ import Footer from "@/components/footer";
 
 export default function Home() {
   return (
-    <div className="min-h-screen flex flex-col bg-gray-100">
+    <div className="min-h-screen flex flex-col bg-gray-100 dark:bg-gray-900 transition-colors duration-300">
       <Header />
-      <main className="container mx-auto p-4 flex-grow">
+      <main className="container mx-auto p-4 grow">
         <section className="text-center mb-12 max-w-2xl mt-8 mx-auto max-md:mt-4">
-          <h2 className="text-4xl font-extrabold text-gray-900">智能计算实验室简介</h2>
-          <p className="text-xl text-gray-600 mt-4 text-left">　　在物理的世界里，粒子有形形色色的活法，有的粒子很轻，终生不为人所注意；有的粒子会一鸣惊人，在湮灭时释放出大量的光；有的粒子狡黠善变，一辈子不停地改变身份，时时刻刻要成为别的粒子；但有的粒子一生稳定，怀揣着出发时得到的巨大能量，一生孤独而平静地飞行，只活在自己的轨道里。</p>
+          <h2 className="text-4xl font-extrabold text-gray-900 dark:text-gray-100">智能计算实验室简介</h2>
+          <p className="text-xl text-gray-600 dark:text-gray-300 mt-4 text-left indent-8">
+            在物理的世界里，粒子有形形色色的活法，有的粒子很轻，终生不为人所注意；有的粒子会一鸣惊人，在湮灭时释放出大量的光；有的粒子狡黠善变，一辈子不停地改变身份，时时刻刻要成为别的粒子；但有的粒子一生稳定，怀揣着出发时得到的巨大能量，一生孤独而平静地飞行，只活在自己的轨道里。
+          </p>
         </section>
         <section className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
           {websites.map((website, index) => (
-            <a key={index} href={website.link} rel="noopener noreferrer" target="_blank">
-              <div className="list-item bg-gray-50 p-3 shadow hover:shadow-lg transition-shadow duration-300">
-                <Image src={website.icon} alt={website.title} width={80} height={80} className="list-icon rounded-lg overflow-hidden flex-shrink-0" />
-                <div className="list-info flex-shrink pl-3 pt-2 my-1 truncate">
-                  <h3 className="list-name text-xl font-bold my-1 truncate">{website.title}</h3>
-                  <div className="text-sm text-gray-500 truncate">{website.description}</div>
+            <a key={index} href={website.link} rel="noopener noreferrer" target="_blank" className="flex justify-center">
+              <div className="flex items-center bg-gray-50 dark:bg-gray-800 p-3 rounded-xl shadow-sm hover:shadow-xl transition-all duration-300 w-full max-w-md">
+                <Image src={website.icon} alt={website.title} width={80} height={80} className="list-icon rounded-lg overflow-hidden shrink-0" />
+                <div className="list-info shrink pl-3 pt-2 my-1 truncate w-full">
+                  <h3 className="list-name text-xl font-bold my-1 truncate text-gray-900 dark:text-gray-100">{website.title}</h3>
+                  <div className="text-sm text-gray-500 dark:text-gray-400 truncate">{website.description}</div>
                 </div>
               </div>
             </a>

components/footer.tsx

@@ -1,8 +1,16 @@
+import Link from "next/link";
+
 export default function Footer() {
   return (
-    <footer className="w-full bg-white shadow p-4 text-left text-gray-500 flex flex-row gap-2">
+    <footer className="w-full bg-white dark:bg-gray-950 shadow-sm p-4 text-left text-gray-500 dark:text-gray-400 flex flex-row gap-2">
       <div className="container mx-auto">
-        <div>© {new Date().getFullYear()} 智能计算实验室 · Designed by LufsX.</div>
+        <div>
+          © {new Date().getFullYear()} 智能计算实验室 · Designed by{" "}
+          <Link href="https://isteed.cc" target="_blank" rel="noopener noreferrer">
+            LufsX
+          </Link>
+          .
+        </div>
       </div>
     </footer>
   );

components/header.tsx

@@ -2,18 +2,18 @@ import Link from "next/link";
 
 export default function Header() {
   return (
-    <header className="home-header px-4 w-full bg-white shadow flex sm:px-8">
+    <header className="home-header px-4 w-full bg-white dark:bg-gray-950 shadow-sm flex sm:px-8">
       <nav className="container mx-auto flex justify-between items-center">
         <div className="flex items-center">
           <Link href="/">
-            <h1 className="text-2xl font-bold text-gray-900">智能计算实验室</h1>
+            <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">智能计算实验室</h1>
           </Link>
         </div>
         <div className="flex space-x-4">
-          <Link className="nav-link py-3 px-2" href="/">
+          <Link className="nav-link py-3 px-2 text-gray-700 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 transition-colors" href="/">
             首页
           </Link>
-          {/* <Link className="nav-link py-3 px-2" href="/contacts">
+          {/* <Link className="nav-link py-3 px-2 text-gray-700 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 transition-colors" href="/">
             联系
           </Link> */}
         </div>

package.json

@@ -9,20 +9,21 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "next": "15.2.2",
-    "react": "19.0.0",
-    "react-dom": "19.0.0"
+    "next": "15.3.0",
+    "react": "19.1.0",
+    "react-dom": "19.1.0"
   },
   "devDependencies": {
-    "@eslint/eslintrc": "3.3.0",
-    "@types/node": "22.13.10",
-    "@types/react": "19.0.10",
-    "@types/react-dom": "19.0.4",
-    "eslint": "9.22.0",
-    "eslint-config-next": "15.2.2",
+    "@eslint/eslintrc": "3.3.1",
+    "@tailwindcss/postcss": "^4.1.4",
+    "@types/node": "22.14.1",
+    "@types/react": "19.1.2",
+    "@types/react-dom": "19.1.2",
+    "eslint": "9.24.0",
+    "eslint-config-next": "15.3.0",
     "postcss": "8.5.3",
-    "tailwindcss": "3.4.17",
-    "typescript": "5.8.2"
+    "tailwindcss": "4.1.4",
+    "typescript": "5.8.3"
   },
   "pnpm": {
     "ignoredBuiltDependencies": [

postcss.config.mjs

@@ -1,7 +1,7 @@
 /** @type {import('postcss-load-config').Config} */
 const config = {
   plugins: {
-    tailwindcss: {},
+    '@tailwindcss/postcss': {},
   },
 };
 

tailwind.config.ts

@@ -1,18 +0,0 @@
-import type { Config } from "tailwindcss";
-
-export default {
-  content: [
-    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
-    "./components/**/*.{js,ts,jsx,tsx,mdx}",
-    "./app/**/*.{js,ts,jsx,tsx,mdx}",
-  ],
-  theme: {
-    extend: {
-      colors: {
-        background: "var(--background)",
-        foreground: "var(--foreground)",
-      },
-    },
-  },
-  plugins: [],
-} satisfies Config;