[Chore] Support Tailwind CSS

docusaurus.config.js

@@ -19,6 +19,7 @@
 const path = require('path')
 // TODO: [remove] 代码块只用dark主题
 const darkTheme = require('prism-react-renderer/themes/vsDark')
+const tailwindPlugin = require('./plugins/tailwind-config.cjs')
 
 /** @type {import('@docusaurus/types').Config} */
 const config = {
@@ -313,6 +314,17 @@ const config = {
         sidebarPath: require.resolve('./sidebars.js'),
       },
     ],
+    tailwindPlugin,
+    // async function tailwindcss(context, options) {
+    //   return {
+    //     name: "docusaurus-tailwindcss",
+    //     configurePostCss(postcssOptions) {
+    //       postcssOptions.plugins.push(require("tailwindcss"));
+    //       postcssOptions.plugins.push(require("autoprefixer"));
+    //       return postcssOptions;
+    //     },
+    //   };
+    // },
     // load github info
     path.resolve(__dirname, 'plugins', 'github-info')
   ],

package.json

@@ -26,10 +26,12 @@
     "@mdx-js/react": "^3.0.1",
     "@svgr/webpack": "^6.5.1",
     "aos": "^2.3.4",
+    "autoprefixer": "^10.4.19",
     "clsx": "^1.2.1",
     "file-loader": "^6.2.0",
     "framer-motion": "^10.18.0",
     "[email protected]": "link:docusaurus/[email protected]",
+    "postcss": "^8.4.39",
     "prism-react-renderer": "^1.3.5",
     "prismjs": "^1.29.0",
     "react": "^18.3.1",
@@ -38,6 +40,7 @@
     "react-fast-marquee": "^1.6.4",
     "react-tsparticles": "^2.12.2",
     "sass-loader": "^13.3.3",
+    "tailwindcss": "^3.4.6",
     "url-loader": "^4.1.1"
   },
   "devDependencies": {

plugins/tailwind-config.cjs

@@ -0,0 +1,14 @@
+function tailwindPlugin(context, options) {
+  return {
+    name: 'tailwind-plugin',
+    configurePostCss(postcssOptions) {
+      postcssOptions.plugins = [
+        require('tailwindcss'),
+        require('autoprefixer'),
+      ];
+      return postcssOptions;
+    },
+  };
+}
+
+module.exports = tailwindPlugin;