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,6 +1,27 @@
-@tailwind base;
+@import "tailwindcss";
-@tailwind components;
+
-@tailwind utilities;
+@theme {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+}
+
+/*
+  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);
+  }
+}
 
 body {
   color: var(--foreground);
@@ -52,3 +73,7 @@ body {
 .transition-shadow {
   transition: box-shadow 0.3s ease-in-out;
 }
+
+.container {
+  max-width: 1200px;
+}

app/layout.tsx

@@ -12,7 +12,7 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="zh-cn" className="dark">
-      <body className="antialiased min-h-screen flex flex-col bg-gray-100 dark:bg-gray-900 transition-colors ">{children}</body>
+      <body className="antialiased min-h-screen flex flex-col">{children}</body>
     </html>
   );
 }

app/page.tsx

@@ -7,7 +7,7 @@ export default function Home() {
   return (
     <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 dark:text-gray-100">智能计算实验室简介</h2>
           <p className="text-xl text-gray-600 dark:text-gray-300 mt-4 text-left indent-8">
@@ -17,9 +17,9 @@ export default function Home() {
         <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" className="flex justify-center">
-              <div className="flex items-center bg-gray-50 dark:bg-gray-800 p-3 rounded-xl shadow hover:shadow-xl transition-all duration-300 w-full max-w-md">
+              <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 flex-shrink-0" />
+                <Image src={website.icon} alt={website.title} width={80} height={80} className="list-icon rounded-lg overflow-hidden shrink-0" />
-                <div className="list-info flex-shrink pl-3 pt-2 my-1 truncate w-full">
+                <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>

components/footer.tsx

@@ -1,8 +1,16 @@
+import Link from "next/link";
+
 export default function Footer() {
   return (
-    <footer className="w-full bg-white dark:bg-gray-950 shadow p-4 text-left text-gray-500 dark:text-gray-400 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,7 +2,7 @@ import Link from "next/link";
 
 export default function Header() {
   return (
-    <header className="home-header px-4 w-full bg-white dark:bg-gray-950 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="/">

package.json

@@ -9,20 +9,21 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "next": "15.2.2",
+    "next": "15.3.0",
-    "react": "19.0.0",
+    "react": "19.1.0",
-    "react-dom": "19.0.0"
+    "react-dom": "19.1.0"
   },
   "devDependencies": {
-    "@eslint/eslintrc": "3.3.0",
+    "@eslint/eslintrc": "3.3.1",
-    "@types/node": "22.13.10",
+    "@tailwindcss/postcss": "^4.1.4",
-    "@types/react": "19.0.10",
+    "@types/node": "22.14.1",
-    "@types/react-dom": "19.0.4",
+    "@types/react": "19.1.2",
-    "eslint": "9.22.0",
+    "@types/react-dom": "19.1.2",
-    "eslint-config-next": "15.2.2",
+    "eslint": "9.24.0",
+    "eslint-config-next": "15.3.0",
     "postcss": "8.5.3",
-    "tailwindcss": "3.4.17",
+    "tailwindcss": "4.1.4",
-    "typescript": "5.8.2"
+    "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;