@modern-js/main-doc 2.69.4 → 3.0.0-alpha.0

package/docs/zh/guides/upgrade/tailwindcss.mdx

@@ -0,0 +1,130 @@
+# Tailwind 插件变更
+
+Modern.js 3.0 推荐通过 Rsbuild 原生方式接入 Tailwind CSS，不再依赖 `@modern-js/plugin-tailwindcss` 插件，从而充分利用 Rsbuild 提供的更灵活的配置能力和更优的构建体验。
+
+## 迁移步骤
+
+本小节中的迁移操作都是仅当项目中实际使用了 `@modern-js/plugin-tailwindcss` 插件时才需要执行。
+
+### 1. 移除旧插件
+
+移除 `@modern-js/plugin-tailwindcss` 依赖和配置。
+
+**2.0 版本：**
+
+```ts title="modern.config.ts"
+import { defineConfig } from '@modern-js/app-tools';
+import tailwindcssPlugin from '@modern-js/plugin-tailwindcss';
+
+export default defineConfig({
+  plugins: [tailwindcssPlugin()],
+});
+```
+
+**3.0 版本：**
+
+```ts title="modern.config.ts"
+import { defineConfig } from '@modern-js/app-tools';
+
+export default defineConfig({
+  plugins: [],
+});
+```
+
+同时移除 `package.json` 中的 `@modern-js/plugin-tailwindcss` 依赖。
+
+### 2. 配置 PostCSS
+
+创建或更新 `postcss.config.cjs` 文件。
+
+```js title="postcss.config.cjs"
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+  },
+};
+```
+
+### 3. Tailwind CSS 配置迁移
+
+**单一配置情况**：
+
+- 若仅在 `tailwind.config.{ts,js}` 中配置，则无需额外处理
+- 若仅在 `modern.config.ts` 中配置，需将 Tailwind 相关配置移植到 `tailwind.config.{ts,js}` 中
+
+**双重配置情况**：
+
+若在 `tailwind.config.{ts,js}` 与 `modern.config.ts` 中都有配置，需要合并两者的配置内容，并将合并后的配置移植到 `tailwind.config.{ts,js}`。
+
+**特殊目录处理**：
+
+若项目中存在 storybook 或 config/html 目录，需在 `tailwind.config.{ts,js}` 的 `content` 中补充：
+
+```ts title="tailwind.config.ts"
+export default {
+  content: [
+    './src/**/*.{js,jsx,ts,tsx}',
+    './storybook/**/*', // 如果存在 storybook 目录
+    './config/html/**/*.{html,ejs,hbs}', // 如果存在 config/html 目录
+  ],
+};
+```
+
+### 4. CSS 样式引入
+
+将 CSS 导入方式变更为 `@tailwind` 指令方式。
+
+**2.0 版本：**
+
+```css
+@import 'tailwindcss/base.css';
+@import 'tailwindcss/components.css';
+@import 'tailwindcss/utilities.css';
+```
+
+**3.0 版本：**
+
+```css
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+```
+
+### 5. Twin.macro 集成
+
+若项目中有使用 twin.macro，需要手动配置。未使用则可忽略此步骤。
+
+**处理步骤**：
+
+1. 手动安装依赖：`pnpm add twin.macro styled-components babel-plugin-macros -D`
+2. 在 `modern.config.ts` 中配置 `babel-plugin-macros` 插件：
+
+```ts title="modern.config.ts"
+export default defineConfig({
+  plugins: [appTools()],
+  tools: {
+    babel: {
+      plugins: [
+        [
+          'babel-plugin-macros',
+          {
+            twin: {
+              preset: 'styled-components',
+              config: './tailwind.config.ts',
+            },
+          },
+        ],
+      ],
+    },
+  },
+});
+```
+
+## Tailwind CSS V2 版本迁移
+
+如果你的项目仍使用 Tailwind CSS v2，我们推荐你升级到 v3 以支持 JIT 等能力。关于 Tailwind CSS v2 与 v3 版本之间的差异，请参考：
+
+- [Tailwind CSS v3.0](https://tailwindcss.com/blog/tailwindcss-v3)
+- [Upgrade Guide](https://v3.tailwindcss.com/docs/upgrade-guide)
+
+Tailwind CSS v2 迁移同样参考上述步骤，但需要注意的是，原插件自动适配 Tailwind v2（`purge` 配置）与 v3（`content` 配置）的差异。移除插件后，如果使用 v2，需在 `tailwind.config.{ts,js}` 中使用 `purge` 配置项来指定需要保留的 CSS 类名。

package/docs/zh/guides/upgrade/web-server.md

@@ -0,0 +1,93 @@
+# 自定义 Web Server 变化
+
+本章节覆盖两类旧版自定义 Server API 的升级
+
+- **unstableMiddleware**
+- **Hook**
+
+这两种写法在旧版中互斥，迁移时请根据项目实际使用的能力选择对应路径。
+
+
+## unstableMiddleware
+
+### 核心差异
+
+- **文件结构**：`server/index.ts` → `server/modern.server.ts`
+- **导出方式**：`unstableMiddleware` 数组 → `defineServerConfig`
+- **Context API**：Modern.js Server Context → Hono Context（`c.req`/`c.res`）
+- **中间件执行**：旧版可不调用 `next()`，新版必须调用后续链路才会执行
+- **响应方式**：`c.response.raw()` → `c.text()` / `c.json()`
+
+### 文件与导出
+
+```typescript
+// 旧版 - server/index.ts
+export const unstableMiddleware: UnstableMiddleware[] = [middleware1, middleware2];
+
+// 新版 - server/modern.server.ts
+import { defineServerConfig } from '@modern-js/server-runtime';
+
+export default defineServerConfig({
+  middlewares: [
+    { name: 'middleware1', handler: middleware1 },
+    { name: 'middleware2', handler: middleware2 },
+  ],
+});
+```
+
+### 类型与 next 调用
+
+```typescript
+// 旧版
+import type { UnstableMiddleware, UnstableMiddlewareContext } from '@modern-js/server-runtime';
+const middleware: UnstableMiddleware = async (c: UnstableMiddlewareContext, next) => {
+  return c.response.raw('response'); // 不调用 next 也会继续渲染
+};
+
+// 新版
+import { defineServerConfig, type MiddlewareHandler } from '@modern-js/server-runtime';
+const middleware: MiddlewareHandler = async (c, next) => {
+  await next(); // 必须调用
+  return c.text('response');
+};
+```
+
+### Context API 对照
+
+| 旧版 API               | 新版 API                 | 说明            |
+| -------------------- | ---------------------- | ------------- |
+| `c.request.cookie`   | `getCookie(c, 'key')`  | Cookie 读取      |
+| `c.req.cookie()`     | `getCookie(c, 'key')`  | Hono v4 已废弃    |
+| `c.request.pathname` | `c.req.path`           | 请求路径          |
+| `c.request.host`     | `c.req.header('Host')` | 请求主机          |
+| `c.request.query`    | `c.req.query()`        | 查询参数          |
+| `c.request.headers`  | `c.req.header()`       | 请求头           |
+| `c.response.status`  | `c.status()`           | 响应状态码         |
+| `c.response.set`     | `c.res.headers.set`    | 设置响应头         |
+| `c.response.raw`     | `c.text` / `c.json`    | 响应体           |
+
+
+## afterRender Hook
+
+`afterRender` 仅用于页面渲染完成后的 HTML 处理。
+
+```typescript
+import { defineServerConfig, type MiddlewareHandler } from '@modern-js/server-runtime';
+
+const renderMiddleware: MiddlewareHandler = async (c, next) => {
+  await next(); // 先等待页面渲染
+  const { res } = c;
+  const html = await res.text();
+
+  const modified = html
+    .replace('<head>', '<head><meta name="author" content="ByteDance">')
+    .replace('<body>', '<body><div id="loading">Loading...</div>')
+    .replace('</body>', '<script>console.log("Page loaded")</script></body>');
+
+  c.res = c.body(modified, { status: res.status, headers: res.headers });
+};
+
+export default defineServerConfig({
+  renderMiddlewares: [{ name: 'custom-content-injection', handler: renderMiddleware }],
+});
+```

package/docs/zh/plugin/cli-plugins/api.mdx

@@ -13,9 +13,9 @@ CLI 插件需要通过 `modern.config.ts` 中的 [`plugins`](/configure/app/plug
 一个典型的 CLI 插件结构如下：
 
 ```typescript
-import type { CliPluginFuture, AppTools } from '@modern-js/app-tools';
+import type { CliPlugin, AppTools } from '@modern-js/app-tools';
 
-const myCliPlugin = (): CliPluginFuture<AppTools<'shared'>> => ({
+const myCliPlugin = (): CliPlugin<AppTools> => ({
   name: '@my-org/my-plugin', // 插件名称，确保唯一性
   setup: api => {
     // 在这里使用 API 注册钩子、添加命令等
@@ -59,7 +59,6 @@ export default myCliPlugin;
 | `apiDirectory`         | `string`            | API 模块目录的绝对路径 (BFF 使用)                  | -                           |
 | `lambdaDirectory`      | `string`            | Lambda 模块目录的绝对路径 (BFF 使用)               | -                           |
 | `runtimeConfigFile`    | `string`            | 运行时配置文件的名称                               | -                           |
-| `serverConfigFile`     | `string`            | 服务器配置文件的名称                               | -                           |
 | `checkedEntries`       | `string[]`          | 指定的入口信息                                     | -                           |
 | `apiOnly`              | `boolean`           | 是否为 `apiOnly` 模式                              | -                           |
 
@@ -129,8 +128,8 @@ api.onBeforeBuild(() => {
 - **示例：**
 
 ```typescript
-if (api.isPluginExists('@modern-js/plugin-tailwind')) {
-  console.log('Tailwind CSS 插件已启用');
+if (api.isPluginExists('@modern-js/plugin-bff')) {
+  console.log('BFF 插件已启用');
 }
 ```
 

package/docs/zh/plugin/cli-plugins/migration.mdx

@@ -6,30 +6,11 @@ Modern.js 插件系统在不断演进，为了提供更清晰的 API 和更强
 
 ### 迁移步骤总览
 
-1. **更新插件类型定义**：将 `CliPlugin` 类型替换为 `CliPluginFuture`。
-2. **调整 Hooks 调用方式**：从 `return hooks` 模式迁移到 `api.xxx` 直接调用。
-3. **替换已变更的 API**：参照详细的 API 映射表，更新您的代码。
+1. **调整 Hooks 调用方式**：从 `return hooks` 模式迁移到 `api.xxx` 直接调用。
+2. **替换已变更的 API**：参照详细的 API 映射表，更新您的代码。
 
 ### 详细迁移步骤
 
-#### 更新插件类型定义
-
-这是迁移的第一步，也是最关键的一步。它确保您的插件能够与新版插件系统正确交互。
-
-```typescript
-// 旧版写法
-import type { CliPlugin, AppTools } from '@modern-js/app-tools';
-
-const plugin: CliPlugin<AppTools<'shared'>> = { ... };
-
-// 新版写法
-import type { CliPluginFuture, AppTools } from '@modern-js/app-tools';
-
-const plugin: CliPluginFuture<AppTools<'shared'>> = { ... };
-```
-
-**说明：** `CliPluginFuture` 类型是新版插件的标准定义，它带来了更好的类型推断和更清晰的 API 结构。
-
 #### 调整 Hooks 调用方式
 
 新版插件系统推荐使用 `api` 对象直接调用 Hooks，这种方式更直观、更易于维护。
@@ -38,15 +19,19 @@ const plugin: CliPluginFuture<AppTools<'shared'>> = { ... };
 // 旧版写法 (return hooks)
 {
   setup: () => ({
-    commands({ program }) { /*...*/ }
-  })
+    commands({ program }) {
+      /*...*/
+    },
+  });
 }
 
 // 新版写法 (api.xxx)
 {
   setup: api => {
-    api.addCommand(({ program }) => { /*...*/ })
-  }
+    api.addCommand(({ program }) => {
+      /*...*/
+    });
+  };
 }
 ```
 
@@ -56,26 +41,26 @@ const plugin: CliPluginFuture<AppTools<'shared'>> = { ... };
 
 为了保持 API 的一致性和清晰性，我们对部分 API 的名称进行了调整。下表列出了所有变更的 API 及其新旧对应关系：
 
-| 旧版 API                 | 新版 API                      | 说明                                                                                                                                                                                                                                                                                                                                                      |
-| :----------------------- | :---------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `useAppContext`          | `getAppContext`               | 获取应用上下文信息。                                                                                                                                                                                                                                                                                                                                       |
-| `useConfigContext`       | `getConfig`                  | 获取用户配置文件中的配置。                                                                                                                                                                                                                                                                                                                                    |
-| `useResolvedConfigContext` | `getNormalizedConfig`        | 获取经过插件处理后的最终配置。                                                                                                                                                                                                                                                                                                                                 |
-| `beforeConfig`           | (直接在 `setup` 中定义)     | 不再需要单独的 `beforeConfig` Hook，直接在 `setup` 函数中编写相关逻辑即可。                                                                                                                                                                                                                                                                                        |
-| `prepare`                | `onPrepare`                   | 运行主流程的前置准备阶段。                                                                                                                                                                                                                                                                                                                                    |
-| `afterPrepare`           | `onAfterPrepare` (不推荐)   | 在 `onPrepare` 之后执行，但可能在未来版本中废弃。建议将逻辑合并到 `onPrepare` 中。                                                                                                                                                                                                                                                                              |
-| `beforePrintInstructions`| `onBeforePrintInstructions`   | 在打印日志信息前执行。                                                                                                                                                                                                                                                                                                                                    |
-| `commands`               | `addCommand`                  | 添加新的 CLI 命令。                                                                                                                                                                                                                                                                                                                                       |
-| `watchFiles`             | `addWatchFiles`               | 添加需要监听的文件。                                                                                                                                                                                                                                                                                                                                       |
-| `fileChange`             | `onFileChanged`               | 监听文件变化事件。                                                                                                                                                                                                                                                                                                                                       |
-| `beforeCreateCompiler`   | `onBeforeCreateCompiler`      | 创建编译器前执行。                                                                                                                                                                                                                                                                                                                                       |
-| `afterCreateCompiler`    | `onAfterCreateCompiler`       | 创建编译器后执行。                                                                                                                                                                                                                                                                                                                                       |
-| `beforeBuild`            | `onBeforeBuild`               | 构建前执行。                                                                                                                                                                                                                                                                                                                                       |
-| `afterBuild`             | `onAfterBuild`                | 构建后执行。                                                                                                                                                                                                                                                                                                                                       |
-| `beforeDev`              | `onBeforeDev`                 | 运行 `dev` 命令前执行。                                                                                                                                                                                                                                                                                                                                   |
-| `afterDev`               | `onDevCompileDone`            | `dev` 命令编译完成后执行。                                                                                                                                                                                                                                                                                                                                 |
-| `beforeExit`             | `onBeforeExit`                | 进程退出前执行。                                                                                                                                                                                                                                                                                                                                       |
-| `htmlPartials`           | `modifyHtmlPartials`          | 修改 HTML 模板片段。                                                                                                                                                                                                                                                                                                                                      |
+| 旧版 API                   | 新版 API                    | 说明                                                                               |
+| :------------------------- | :-------------------------- | :--------------------------------------------------------------------------------- |
+| `useAppContext`            | `getAppContext`             | 获取应用上下文信息。                                                               |
+| `useConfigContext`         | `getConfig`                 | 获取用户配置文件中的配置。                                                         |
+| `useResolvedConfigContext` | `getNormalizedConfig`       | 获取经过插件处理后的最终配置。                                                     |
+| `beforeConfig`             | (直接在 `setup` 中定义)     | 不再需要单独的 `beforeConfig` Hook，直接在 `setup` 函数中编写相关逻辑即可。        |
+| `prepare`                  | `onPrepare`                 | 运行主流程的前置准备阶段。                                                         |
+| `afterPrepare`             | `onAfterPrepare` (不推荐)   | 在 `onPrepare` 之后执行，但可能在未来版本中废弃。建议将逻辑合并到 `onPrepare` 中。 |
+| `beforePrintInstructions`  | `onBeforePrintInstructions` | 在打印日志信息前执行。                                                             |
+| `commands`                 | `addCommand`                | 添加新的 CLI 命令。                                                                |
+| `watchFiles`               | `addWatchFiles`             | 添加需要监听的文件。                                                               |
+| `fileChange`               | `onFileChanged`             | 监听文件变化事件。                                                                 |
+| `beforeCreateCompiler`     | `onBeforeCreateCompiler`    | 创建编译器前执行。                                                                 |
+| `afterCreateCompiler`      | `onAfterCreateCompiler`     | 创建编译器后执行。                                                                 |
+| `beforeBuild`              | `onBeforeBuild`             | 构建前执行。                                                                       |
+| `afterBuild`               | `onAfterBuild`              | 构建后执行。                                                                       |
+| `beforeDev`                | `onBeforeDev`               | 运行 `dev` 命令前执行。                                                            |
+| `afterDev`                 | `onDevCompileDone`          | `dev` 命令编译完成后执行。                                                         |
+| `beforeExit`               | `onBeforeExit`              | 进程退出前执行。                                                                   |
+| `htmlPartials`             | `modifyHtmlPartials`        | 修改 HTML 模板片段。                                                               |
 
 **说明：** 请务必仔细检查您的代码，确保所有旧版 API 都已替换为新版 API。
 

package/docs/zh/plugin/introduction.mdx

@@ -70,21 +70,36 @@ export default defineRuntimeConfig({
 });
 ```
 
-{/* prettier-ignore */}
-{/* #### Server 插件
+#### Server 插件
 
 Server 插件用于在应用接受请求时提供额外功能，例如添加中间件、修改请求响应等。
 
 Server 插件通过 `server/modern.server.ts` 中的 `plugins` 字段进行配置。
 
-````ts title="src/modern.server.ts"
-import { defineConfig } from '@modern-js/app-tools/server';
-import bffPlugin from '@modern-js/plugin-bff/server';
-
-export default defineConfig({
-  plugins: [bffPlugin()],
+```ts title="server/modern.server.ts"
+import { defineServerConfig } from '@modern-js/server-runtime';
+
+export default defineServerConfig({
+  plugins: [
+    {
+      name: 'custom-plugin-in-config',
+      setup: api => {
+        api.onPrepare(() => {
+          const { middlewares } = api.getServerContext();
+
+          middlewares?.push({
+            name: 'server-plugin-middleware',
+            handler: async (c, next) => {
+              c.res.headers.set('x-render-middleware-plugin', 'ok');
+              await next();
+            },
+          });
+        });
+      },
+    },
+  ],
 });
-``` */}
+```
 
 :::tip
 Modern.js 从 `MAJOR_VERSION.66.0` 起正式对外使用新的插件机制。
@@ -123,21 +138,16 @@ Modern.js 从 `MAJOR_VERSION.46.0` 起，底层构建工具升级为 [Rsbuild](h
 
 以下为已在 Modern.js 中内置的 Rsbuild 官方插件，无需安装，即可启用：
 
-| 插件                                                                                         | 介绍                                                                                     | Modern.js 链接                                                                                                                        |
-| -------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
-| [React 插件](https://rsbuild.rs/zh/plugins/list/plugin-react)                               | 提供对 React 的支持                                                                      | -                                                                                                                                     |
-| [SVGR 插件](https://rsbuild.rs/zh/plugins/list/plugin-svgr)                                 | 支持将 SVG 图片转换为一个 React 组件                                                     | [output.disableSvgr](/configure/app/output/disable-svgr)<br />[output.svgDefaultExport](/configure/app/output/svg-default-export)     |
-| [Styled Components 插件](https://github.com/rspack-contrib/rsbuild-plugin-styled-components) | 提供对 styled-components 的编译时支持                                                    | [tools.styledComponents](/configure/app/tools/styled-components.html)                                                                 |
-| [Assets Retry 插件](https://rsbuild.rs/zh/plugins/list/plugin-assets-retry)                 | 用于在静态资源加载失败时自动发起重试请求                                                 | [output.assetsRetry](/configure/app/output/assets-retry.html)                                                                         |
-| [Type Check 插件](https://github.com/rspack-contrib/rsbuild-plugin-type-check)               | 用于在单独的进程中运行 TypeScript 类型检查                                               | [output.disableTsChecker](/configure/app/output/disable-ts-checker.html)<br />[tools.tsChecker](/configure/app/tools/ts-checker.html) |
-| [Node Polyfill 插件](https://github.com/rspack-contrib/rsbuild-plugin-node-polyfill)         | 用于注入 Node 核心模块在浏览器端的 polyfills                                             | [output.disableNodePolyfill](/configure/app/output/disable-node-polyfill.html)                                                        |
-| [Source Build 插件](https://github.com/rspack-contrib/rsbuild-plugin-source-build)           | 用于 monorepo 场景，支持引用其他子目录的源代码，并完成构建和热更新                       | [experiments.sourceBuild](/configure/app/experiments/source-build.html)                                                               |
-| [Check Syntax 插件](https://github.com/rspack-contrib/rsbuild-plugin-check-syntax)           | 用于分析产物的语法兼容性，判断是否存在导致兼容性问题的高级语法                           | [security.checkSyntax](/configure/app/security/check-syntax.html)                                                                     |
-| [CSS Minimizer 插件](https://github.com/rspack-contrib/rsbuild-plugin-css-minimizer)         | 用于自定义 CSS 压缩工具，切换到 [cssnano](https://cssnano.co/) 或其他工具进行 CSS 压缩   | [tools.minifyCss](/configure/app/tools/minify-css.html)                                                                               |
-| [Pug 插件](https://github.com/rspack-contrib/rsbuild-plugin-pug)                             | 提供对 Pug 模板引擎的支持                                                                | [tools.pug](/configure/app/tools/pug.html)                                                                                            |
-| [Rem 插件](https://github.com/rspack-contrib/rsbuild-plugin-rem)                             | 用于实现移动端页面的 rem 自适应布局                                                      | [output.convertToRem](/configure/app/output/convert-to-rem.html)                                                                      |
-| [YAML 插件](https://github.com/rspack-contrib/rsbuild-plugin-yaml)                           | 用于引用 YAML 文件，并将其转换为 JavaScript 对象                                         | [YAML 文件](/guides/basic-features/static-assets/json-files.html#yaml-文件)                                                                         |
-| [TOML 插件](https://github.com/rspack-contrib/rsbuild-plugin-toml)                           | 用于引用 TOML 文件，并将其转换为 JavaScript 对象                                         | [TOML 文件](/guides/basic-features/static-assets/json-files.html#toml-文件)                                                                       |
+| 插件                                                                                 | 介绍                                                                                   | Modern.js 链接                                                                                                                        |
+| ------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
+| [React 插件](https://rsbuild.rs/zh/plugins/list/plugin-react)                        | 提供对 React 的支持                                                                    | -                                                                                                                                     |
+| [SVGR 插件](https://rsbuild.rs/zh/plugins/list/plugin-svgr)                          | 支持将 SVG 图片转换为一个 React 组件                                                   | [output.disableSvgr](/configure/app/output/disable-svgr)<br />[output.svgDefaultExport](/configure/app/output/svg-default-export)     |
+| [Assets Retry 插件](https://rsbuild.rs/zh/plugins/list/plugin-assets-retry)          | 用于在静态资源加载失败时自动发起重试请求                                               | [output.assetsRetry](/configure/app/output/assets-retry.html)                                                                         |
+| [Type Check 插件](https://github.com/rspack-contrib/rsbuild-plugin-type-check)       | 用于在单独的进程中运行 TypeScript 类型检查                                             | [output.disableTsChecker](/configure/app/output/disable-ts-checker.html)<br />[tools.tsChecker](/configure/app/tools/ts-checker.html) |
+| [Source Build 插件](https://github.com/rspack-contrib/rsbuild-plugin-source-build)   | 用于 monorepo 场景，支持引用其他子目录的源代码，并完成构建和热更新                     | [experiments.sourceBuild](/configure/app/experiments/source-build.html)                                                               |
+| [Check Syntax 插件](https://github.com/rspack-contrib/rsbuild-plugin-check-syntax)   | 用于分析产物的语法兼容性，判断是否存在导致兼容性问题的高级语法                         | [security.checkSyntax](/configure/app/security/check-syntax.html)                                                                     |
+| [CSS Minimizer 插件](https://github.com/rspack-contrib/rsbuild-plugin-css-minimizer) | 用于自定义 CSS 压缩工具，切换到 [cssnano](https://cssnano.co/) 或其他工具进行 CSS 压缩 | [tools.minifyCss](/configure/app/tools/minify-css.html)                                                                               |
+| [Rem 插件](https://github.com/rspack-contrib/rsbuild-plugin-rem)                     | 用于实现移动端页面的 rem 自适应布局                                                    | [output.convertToRem](/configure/app/output/convert-to-rem.html)                                                                      |
 
 #### 未内置的插件
 
@@ -146,6 +156,8 @@ Modern.js 从 `MAJOR_VERSION.46.0` 起，底层构建工具升级为 [Rsbuild](h
 - [Image Compress 插件](https://github.com/rspack-contrib/rsbuild-plugin-image-compress)：将项目中用到的图片资源进行压缩处理。
 - [Stylus 插件](https://rsbuild.rs/zh/plugins/list/plugin-stylus)：使用 Stylus 作为 CSS 预处理器。
 - [UMD 插件](https://github.com/rspack-contrib/rsbuild-plugin-umd)：用于构建 UMD 格式的产物。
+- [YAML 插件](https://github.com/rspack-contrib/rsbuild-plugin-yaml)：用于引用 YAML 文件，并将其转换为 JavaScript 对象。
+- [TOML 插件](https://github.com/rspack-contrib/rsbuild-plugin-toml)：用于引用 TOML 文件，并将其转换为 JavaScript 对象。
 
 import OtherPlugins from '@site-docs/components/other-plugins.mdx';
 

package/docs/zh/plugin/official/_meta.json

@@ -3,10 +3,5 @@
     "type": "dir",
     "name": "cli-plugins",
     "label": "cli-plugins"
-  },
-  {
-    "type": "dir",
-    "name": "rsbuild-plugins",
-    "label": "rsbuild-plugins"
   }
 ]

package/docs/zh/plugin/official/cli-plugins/_meta.json

@@ -1 +1 @@
-["plugin-tailwind", "plugin-bff", "plugin-ssg", "plugin-swc"]
+["plugin-bff", "plugin-ssg", "plugin-styled-components"]

package/docs/zh/plugin/official/cli-plugins/plugin-styled-components.mdx

@@ -0,0 +1,5 @@
+# styled-components 插件
+
+在 Modern.js 应用中，通过 styled-components 插件，开发者可以在应用中使用 styled-components 库，实现 CSS-in-JS 的功能。
+
+详细内容可以参考 [使用 CSS-in-JS](/guides/basic-features/css/css-in-js)。

package/docs/zh/plugin/official/cli-plugins.mdx

@@ -1,6 +1,4 @@
 # 概览
 
-- [@modern-js/plugin-tailwindcss](/plugin/official/cli-plugins/plugin-tailwind)：提供使用 Tailwind CSS 样式的能力。
 - [@modern-js/plugin-bff](/plugin/official/cli-plugins/plugin-bff)：提供 BFF 服务，一体化调用的能力。
 - [@modern-js/plugin-ssg](/plugin/official/cli-plugins/plugin-bff)：提供静态站点生成的能力。
-- [@modern-js/plugin-swc](/plugin/official/cli-plugins/plugin-swc)：提供 SWC 编译支持。