博客优化改造

起因

在一天刷b站的时候，刷到了我很喜欢的一个博主介绍他的博客（【程序员没博客？做贼酷炫个人网站的5个技巧！】 https://www.bilibili.com/video/BV1q81XYAEuW/?share_source=copy_web&vd_source=5d8c7e86d2e6328eae0a53b86c73ea4f ）我一看我靠，怎么这么牛逼。于是我想对现存的还是以文档的为主的博客进行一番改造。

问题

生态不兼容

细看一下，博主使用了一些狠好看的动画库。我说这不简单，我也用上就完事了。但我很快发现了一件很蛋疼的事情就是我操，这些动画库都是reat生态的。但我用的vuePress搭建的，那我这不完了。于是我面前就只剩两个选择了：

换一个vue的动画库（但可能没有博主那么好看了）
学习reat，换一个类似的vuePress重构我的博客按照我的性格，我靠怎么可能妥协。妈的就是干，于是五一画了一点时间（手动狗头）去把reat浅学了一下。简单学找了下，发现了docusaurus。

Tailwind CSS植入

使用了docusaurus又发现，这些动画库都使用了Tailwind css，但官方文档里完全没写怎么植入。于是，在我一顿研究下，发现了https://juejin.cn/post/7358084337403428901。一顿配置后，成功运行网站。于是研究了下，他是如何实现的。

 // docusaurus.config.ts
 
 async function myPlugin(context, options) {
            return {
                name: 'docusaurus-tailwindcss',
                configurePostCss(postcssOptions) {
                    postcssOptions.plugins.push(require('tailwindcss'));
                    postcssOptions.plugins.push(require('autoprefixer'));
                    return postcssOptions;
                },
            };
        },

这里发现，是使用的插件功能，然后使用postcss进行导入。我之前直接使用Tailwind css官方的命令来进行导入，是没有理解到 Docusaurus使用了高度封装的构建系统，它基于webpack，但隐藏了许多底层配置：（请教了下Chatgpt 老师）

Docusaurus不直接暴露PostCSS配置接口
它有自己的预设CSS处理流程和优先级
默认配置可能与Tailwind的需求不匹配

起因​

问题​

生态不兼容​

Tailwind CSS植入​

起因

问题

生态不兼容

Tailwind CSS植入