From 9569ca04a14b6cda1101fb01731edcb113cf2ae2 Mon Sep 17 00:00:00 2001 From: buyfakett Date: Thu, 20 Feb 2025 11:23:01 +0800 Subject: [PATCH] =?UTF-8?q?=E5=8D=87=E7=BA=A7tailwindcss?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 8 ++-- postcss.config.cjs | 2 +- src/index.css | 51 +++++++++++++++++++++++-- src/view/AboutMe/OpenSourceProjects.jsx | 2 +- src/view/AboutMe/WorkExperience.jsx | 2 +- src/view/AboutMe/WorkMuen.jsx | 6 +-- src/view/AboutMe/WorkZhenShan.jsx | 6 +-- src/view/NavBar.jsx | 2 +- src/view/Urls/CustomCardList.jsx | 2 +- src/view/magicui/HeadPortraitCircle.jsx | 2 +- src/view/magicui/TypingAnimation.tsx | 2 +- tailwind.config.js | 35 ----------------- 12 files changed, 65 insertions(+), 55 deletions(-) delete mode 100644 tailwind.config.js diff --git a/package.json b/package.json index c84fb89..13c1016 100644 --- a/package.json +++ b/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" } } diff --git a/postcss.config.cjs b/postcss.config.cjs index db801f9..3107edd 100644 --- a/postcss.config.cjs +++ b/postcss.config.cjs @@ -1,5 +1,5 @@ module.exports = { plugins: { - tailwindcss: {}, + '@tailwindcss/postcss': {}, }, }; \ No newline at end of file diff --git a/src/index.css b/src/index.css index b5c61c9..dc24c02 100644 --- a/src/index.css +++ b/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); + } +} diff --git a/src/view/AboutMe/OpenSourceProjects.jsx b/src/view/AboutMe/OpenSourceProjects.jsx index 60fb26a..08d2760 100644 --- a/src/view/AboutMe/OpenSourceProjects.jsx +++ b/src/view/AboutMe/OpenSourceProjects.jsx @@ -10,7 +10,7 @@ const OpenSourceProjects = () => { return (
diff --git a/src/view/AboutMe/WorkExperience.jsx b/src/view/AboutMe/WorkExperience.jsx index a86f3aa..8510a45 100644 --- a/src/view/AboutMe/WorkExperience.jsx +++ b/src/view/AboutMe/WorkExperience.jsx @@ -7,7 +7,7 @@ const WorkExperience = () => { return (
diff --git a/src/view/AboutMe/WorkMuen.jsx b/src/view/AboutMe/WorkMuen.jsx index c143511..6e5dad0 100644 --- a/src/view/AboutMe/WorkMuen.jsx +++ b/src/view/AboutMe/WorkMuen.jsx @@ -10,12 +10,12 @@ const WorkMuen = () => { return ( <> -
-
+
+
沐恩网络
{ return ( <> -
-
+
+
臻善科技
{ {/* 链接 */} + className="flex items-center text-lg font-bold dark:hover:text-blue-400 transition-colors duration-200 md:ml-10 ml-5"> Tools { position="top" showArrow content={ -
+
{item.describe}
}> diff --git a/src/view/magicui/HeadPortraitCircle.jsx b/src/view/magicui/HeadPortraitCircle.jsx index 7fb7e7a..09a770d 100644 --- a/src/view/magicui/HeadPortraitCircle.jsx +++ b/src/view/magicui/HeadPortraitCircle.jsx @@ -6,7 +6,7 @@ import { DiGo, DiPython, DiReact } from 'react-icons/di'; export function HeadPortraitCircle({ children }) { return (
- + {children} diff --git a/src/view/magicui/TypingAnimation.tsx b/src/view/magicui/TypingAnimation.tsx index f89d166..88145e8 100644 --- a/src/view/magicui/TypingAnimation.tsx +++ b/src/view/magicui/TypingAnimation.tsx @@ -48,7 +48,7 @@ export function TypingAnimation({ return (

{displayedText || text} diff --git a/tailwind.config.js b/tailwind.config.js deleted file mode 100644 index 9489c40..0000000 --- a/tailwind.config.js +++ /dev/null @@ -1,35 +0,0 @@ -/** @type {import('tailwindcss').Config} */ -module.exports = { - content: ["./src/**/*.{js,jsx,ts,tsx}"], - darkMode: 'class', // 使用类模式切换暗黑模式 - theme: { - extend: { - animation: { - orbit: "orbit calc(var(--duration)*1s) linear infinite", - }, - keyframes: { - orbit: { - "0%": { - transform: - "rotate(0deg) translateY(calc(var(--radius) * 1px)) rotate(0deg)", - }, - "100%": { - transform: - "rotate(360deg) translateY(calc(var(--radius) * 1px)) rotate(-360deg)", - }, - }, - }, - }, - animation: { - "background-position-spin": - "background-position-spin 3000ms infinite alternate", - }, - keyframes: { - "background-position-spin": { - "0%": { backgroundPosition: "top center" }, - "100%": { backgroundPosition: "bottom center" }, - }, - }, - }, - plugins: [], // 确保插件格式正确 -};