update:更新使用tailwindcss

package.json

@@ -13,6 +13,12 @@
         "mongodb": "^6.8.0",
         "next": "^14.2.4",
         "react": "^18.3.1",
-        "react-dom": "^18.3.1"
+        "react-dom": "^18.3.1",
+        "react-icons": "^5.2.1"
+    },
+    "devDependencies": {
+        "autoprefixer": "^10.4.19",
+        "postcss": "^8.4.39",
+        "tailwindcss": "^3.4.6"
     }
 }

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

styles/globals.css

@@ -0,0 +1,31 @@
+/* styles/globals.css */
+@import url('https://chinese-fonts-cdn.deno.dev/chinesefonts3/packages/dyh/dist/SmileySans-Oblique/result.css');
+@import url('https://chinese-fonts-cdn.deno.dev/chinesefonts3/packages/lxgwwenkai/dist/LXGWWenKai-Regular/result.css');
+@import url('https://chinese-fonts-cdn.deno.dev/chinesefonts3/packages/jhlst/dist/京華老宋体v1_007/result.css');
+@import url('https://chinese-fonts-cdn.deno.dev/chinesefonts3/packages/mzxst/dist/MZPXorig/result.css');
+@import url('https://chinese-fonts-cdn.deno.dev/chinesefonts3/packages/lxgwmanhei/dist/LXGWMarkerGothic/result.css');
+
+/* Tailwind CSS 指令 */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+  user-select: none;
+  /* 所有现代浏览器 */
+  -webkit-user-select: none;
+  /* Safari */
+  -moz-user-select: none;
+  /* Firefox */
+  -ms-user-select: none;
+  /* IE10+ */
+  backdrop-filter: blur(15px);
+  width: 98vw;
+  height: 100vh;
+  margin: 0 auto;
+  letter-spacing: 1px;
+  text-align: center;
+}
+
+/* 需要黑白时专用 */
+/* body { filter: grayscale(100%); } */

tailwind.config.js

@@ -0,0 +1,20 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    './pages/**/*.{js,ts,jsx,tsx}',
+    './components/**/*.{js,ts,jsx,tsx}',
+  ],
+  darkMode: 'class',
+  theme: {
+    extend: {
+      fontFamily: {
+        'smiley': ['Smiley Sans Oblique', 'sans-serif'],
+        'wenkai': ['LXGW WenKai', 'sans-serif'],
+        'oldsong': ['KingHwa_OldSong', 'sans-serif'],
+        'pixel': ['MuzaiPixel', 'sans-serif'],
+        'marker': ['LXGW Marker Gothic', 'sans-serif'],
+      },
+    },
+  },
+  plugins: [],
+};