升级tailwindcss

package.json

@@ -11,7 +11,7 @@
     "@giscus/react": "^3.1.0",
     "@hi-ui/watermark": "^4.0.8",
     "class-variance-authority": "^0.7.0",
-    "clsx": "^1.2.1",
+    "clsx": "^2.1.1",
     "framer-motion": "^12.4.3",
     "lucide-react": "^0.460.0",
     "react": "^18.3.1",
@@ -20,7 +20,7 @@
     "react-icons": "^5.4.0",
     "react-markdown": "^9.0.3",
     "react-router": "^7.2.0",
-    "tailwind-merge": "^2.5.5",
+    "tailwind-merge": "^3.0.1",
     "tailwindcss-animate": "^1.0.7"
   },
   "scripts": {
@@ -64,14 +64,14 @@
     "@rsbuild/core": "^1.2.8",
     "@rsbuild/plugin-mdx": "^1.0.2",
     "@rsbuild/plugin-react": "^1.1.0",
-    "@tailwindcss/postcss": "^4.0.6",
+    "@tailwindcss/postcss": "^4.0.7",
     "@types/node": "^22.13.4",
     "@types/react": "^18.3.1",
     "@types/react-dom": "^18.3.1",
     "prettier": "3.4.2",
     "raw-loader": "^4.0.2",
     "react-snap": "^1.23.0",
-    "tailwindcss": "^3.4.17",
+    "tailwindcss": "^4.0.7",
     "typescript": "^4.9.5"
   }
 }

postcss.config.cjs

@@ -1,5 +1,5 @@
 module.exports = {
     plugins: {
-        tailwindcss: {},
+        '@tailwindcss/postcss': {},
     },
 };

src/index.css

@@ -1,3 +1,48 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
+
+@source './**/*.{js,jsx,ts,tsx}';
+
+@custom-variant dark (&:is(.dark *));
+
+@theme {
+  --animate-*: initial;
+  --animate-background-position-spin: background-position-spin 3000ms infinite
+    alternate;
+  --animate-orbit: orbit calc(var(--duration) * 1s) linear infinite;
+
+  @keyframes background-position-spin {
+    0% {
+      background-position: top center;
+    }
+    100% {
+      background-position: bottom center;
+    }
+  }
+  @keyframes orbit {
+    0% {
+      transform: rotate(0deg) translateY(calc(var(--radius) * 1px)) rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg) translateY(calc(var(--radius) * 1px))
+        rotate(-360deg);
+    }
+  }
+}
+
+/*
+  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);
+  }
+}

src/view/AboutMe/OpenSourceProjects.jsx

@@ -10,7 +10,7 @@ const OpenSourceProjects = () => {
     return (
         <div className="dark:bg-gray-900 dark:text-gray-300">
             <motion.div
-                className="w-full max-w-screen-lg mx-auto flex flex-col items-center mt-20 px-4"
+                className="w-full max-w-(--breakpoint-lg) mx-auto flex flex-col items-center mt-20 px-4"
                 initial={{ opacity: 0, y: 50 }}
                 animate={{ opacity: 1, y: 0 }}
                 transition={{ duration: 1 }}>

src/view/AboutMe/WorkExperience.jsx

@@ -7,7 +7,7 @@ const WorkExperience = () => {
     return (
         <div className="dark:bg-gray-900 dark:text-gray-300">
             <motion.div
-                className="w-full max-w-screen-lg mx-auto flex flex-col items-center mt-10 px-4"
+                className="w-full max-w-(--breakpoint-lg) mx-auto flex flex-col items-center mt-10 px-4"
                 initial={{ opacity: 0, y: 50 }}
                 animate={{ opacity: 1, y: 0 }}
                 transition={{ duration: 1 }}>

src/view/AboutMe/WorkMuen.jsx

@@ -10,12 +10,12 @@ const WorkMuen = () => {
 
     return (
         <>
-            <div className="flex flex-col md:flex-row items-center md:items-start gap-4 md:gap-6 w-full max-w-screen-lg mx-auto relative">
-                <div className="flex-shrink-0">
+            <div className="flex flex-col md:flex-row items-center md:items-start gap-4 md:gap-6 w-full max-w-(--breakpoint-lg) mx-auto relative">
+                <div className="shrink-0">
                     <Image
                         src={imgUrl.muen}
                         alt="沐恩网络"
-                        className="w-16 h-16 md:w-12 md:h-12 md:mt-20 rounded"
+                        className="w-16 h-16 md:w-12 md:h-12 md:mt-20 rounded-sm"
                     />
                 </div>
                 <div

src/view/AboutMe/WorkZhenShan.jsx

@@ -9,12 +9,12 @@ const WorkZhenShan = () => {
 
     return (
         <>
-            <div className="flex flex-col md:flex-row items-center md:items-start gap-4 md:gap-6 w-full max-w-screen-lg mx-auto">
-                <div className="flex-shrink-0">
+            <div className="flex flex-col md:flex-row items-center md:items-start gap-4 md:gap-6 w-full max-w-(--breakpoint-lg) mx-auto">
+                <div className="shrink-0">
                     <Image
                         src={imgUrl.zhenshan}
                         alt="臻善科技"
-                        className="w-16 h-16 md:w-12 md:h-12 md:mt-20 rounded"
+                        className="w-16 h-16 md:w-12 md:h-12 md:mt-20 rounded-sm"
                     />
                 </div>
                 <div

src/view/NavBar.jsx

@@ -26,7 +26,7 @@ const NavBar = () => {
                     {/* 链接 */}
                     <Link
                         to="/tools"
-                        className="flex items-center text-lg font-bold dark:hover:text-blue-400 transition-colors duration-200">
+                        className="flex items-center text-lg font-bold dark:hover:text-blue-400 transition-colors duration-200 md:ml-10 ml-5">
                         Tools
                     </Link>
                     <Link

src/view/Urls/CustomCardList.jsx

@@ -45,7 +45,7 @@ const CustomCardList = ({ data, className }) => {
                                 position="top"
                                 showArrow
                                 content={
-                                    <article className="p-2 text-sm text-gray-200 bg-gray-800 rounded shadow-lg">
+                                    <article className="p-2 text-sm text-gray-200 bg-gray-800 rounded-sm shadow-lg">
                                         {item.describe}
                                     </article>
                                 }>

src/view/magicui/HeadPortraitCircle.jsx

@@ -6,7 +6,7 @@ import { DiGo, DiPython, DiReact } from 'react-icons/di';
 export function HeadPortraitCircle({ children }) {
     return (
         <div className="relative flex h-[500px] w-[500px] flex-col items-center justify-center overflow-hidden rounded-lg bg-background">
-            <span className="pointer-events-none whitespace-pre-wrap bg-gradient-to-b from-black to-gray-300 bg-clip-text text-center text-8xl font-semibold leading-none text-transparent dark:from-white dark:to-black">
+            <span className="pointer-events-none whitespace-pre-wrap bg-linear-to-b from-black to-gray-300 bg-clip-text text-center text-8xl font-semibold leading-none text-transparent dark:from-white dark:to-black">
                 {children}
             </span>
 

src/view/magicui/TypingAnimation.tsx

@@ -48,7 +48,7 @@ export function TypingAnimation({
     return (
         <h1
             className={cn(
-                'font-display text-center text-4xl font-bold leading-[5rem] tracking-[-0.02em] drop-shadow-sm whitespace-pre-wrap',
+                'font-display text-center text-4xl font-bold leading-[5rem] tracking-[-0.02em] drop-shadow-xs whitespace-pre-wrap',
                 className,
             )}>
             {displayedText || text}