🐛 修复 tailwindcss

Author: wling-art

docusaurus.config.ts

@@ -1,5 +1,6 @@
 import type { Options as PresetClassicOptions } from "@docusaurus/preset-classic";
 import type { Config } from "@docusaurus/types";
+import path from "path";
 import { themes as prismThemes } from "prism-react-renderer";
 
 const IS_CHINA_SITE = process.env.CHINA === "true";
@@ -159,7 +160,8 @@ const config: Config = {
                 showLastUpdateAuthor: true,
                 showLastUpdateTime: true
             }
-        ]
+        ],
+        path.resolve(__dirname, "src/plugins/tailwind-plugin.ts")
     ],
     headTags: [
         {

package.json

@@ -45,9 +45,7 @@
         "prism-react-renderer": "^2.4.1",
         "react": "^19.2.0",
         "react-dom": "^19.2.0",
-        "sass": "^1.94.0",
-        "tailwind-merge": "^3.4.0",
-        "tailwindcss": "^4.1.17"
+        "sass": "^1.94.0"
     },
     "devDependencies": {
         "@docusaurus/module-type-aliases": "^3.9.2",
@@ -58,8 +56,11 @@
         "@types/react": "^19.2.6",
         "@types/react-dom": "^19.2.3",
         "autocorrect-node": "^2.14.0",
+        "autoprefixer": "^10.4.22",
         "markdownlint-cli2": "^0.18.1",
+        "postcss": "^8.5.6",
         "swc-loader": "^0.2.6",
+        "tailwindcss": "^4.1.17",
         "typescript": "^5.9.3"
     },
     "browserslist": {

pnpm-lock.yaml

@@ -1,6 +1,7 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@layer theme, base, components, utilities;
+
+@import "tailwindcss/theme.css" layer(theme);
+@import "tailwindcss/utilities.css" layer(utilities);
 
 @import "./base/variables.css";
 @import "./base/theme.css";

src/css/custom.css

@@ -1,9 +1,10 @@
 /* ======================================
    1. TailwindCSS基础
 ====================================== */
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@layer theme, base, components, utilities;
+
+@import "tailwindcss/theme.css" layer(theme);
+@import "tailwindcss/utilities.css" layer(utilities);
 
 /* ======================================
    2. 全局变量定义

src/css/qwe.css

@@ -0,0 +1,11 @@
+import type { PostCssOptions } from "@docusaurus/types";
+
+module.exports = function tailwindPlugin() {
+    return {
+        name: "tailwindcss-plugin",
+        configurePostCss(postcssOptions: PostCssOptions) {
+            postcssOptions.plugins.push(require("@tailwindcss/postcss"));
+            return postcssOptions;
+        }
+    };
+};

src/plugins/tailwind-plugin.ts

@@ -1,11 +1,8 @@
 {
     "extends": "@docusaurus/tsconfig",
     "compilerOptions": {
-        "baseUrl": ".",
-        "esModuleInterop": true,
         "allowSyntheticDefaultImports": true,
         "resolveJsonModule": true,
-        "jsx": "react-jsx",
         "strict": true,
         "forceConsistentCasingInFileNames": true,
         "paths": {
@@ -15,7 +12,5 @@
             "@theme/*": ["src/theme/*"],
             "@css/*": ["src/css/*"]
         }
-    },
-    "include": ["src"],
-    "exclude": ["node_modules", "build", "dist"]
+    }
 }