@modern-js/main-doc 2.34.0 → 2.35.1

package/docs/en/guides/topic-detail/micro-frontend/c03-main-app.mdx

@@ -2,13 +2,14 @@
 sidebar_position: 3
 title: Develop Main App
 ---
+
 # Develop Main App
 
 In the previous [Experience micro frontend](/guides/topic-detail/micro-frontend/c02-development), an example was used to demonstrate how to create and configure micro frontend sub-applications. Through this chapter, you can further understand how to develop the main application, and its common configuration.
 
-After creating an application project through the `@modern-js/create` command, you can execute `pnpm run new` in the project (the `modern new` command is actually executed). After selecting the 「micro frontend」 mode, the micro frontend will be installed. Dependencies, just register the plugin manually.
+After creating an Modern.js project through the `@modern-js/create` command, you can execute `pnpm run new` in the project (the `modern new` command is actually executed). After selecting the 「micro frontend」 mode, the micro frontend will be installed. Dependencies, just register the plugin manually.
 
-import EnableMicroFrontend from "@site-docs-en/components/enable-micro-frontend";
+import EnableMicroFrontend from '@site-docs-en/components/enable-micro-frontend';
 
 <EnableMicroFrontend />
 
@@ -26,7 +27,7 @@ It can be configured at runtime via the API [defineConfig](/apis/app/runtime/app
 When the parameter is a function, it cannot be serialized to the output code, so please configure it through defineConfig when it comes to configuration such as functions
 :::
 
-import MicroRuntimeConfig from "@site-docs-en/components/micro-runtime-config";
+import MicroRuntimeConfig from '@site-docs-en/components/micro-runtime-config';
 
 <MicroRuntimeConfig />
 
@@ -40,15 +41,18 @@ defineConfig(App, {
     manifest: {
       getAppList: async () => {
         // get from remote api
-        return [{
-          name: 'Table',
-          entry: 'http://localhost:8001',
-          // activeWhen: '/table'
-        }, {
-          name: 'Dashboard',
-          entry: 'http://localhost:8002'
-          // activeWhen: '/dashboard'
-        }];
+        return [
+          {
+            name: 'Table',
+            entry: 'http://localhost:8001',
+            // activeWhen: '/table'
+          },
+          {
+            name: 'Dashboard',
+            entry: 'http://localhost:8002',
+            // activeWhen: '/dashboard'
+          },
+        ];
       },
     },
   },
@@ -77,16 +81,30 @@ Suppose our subapp list is configured as follows:
 ```js title="App.tsx"
 import { useModuleApps } from '@modern-js/plugin-garfish/runtime';
 
-import { RouterProvider, Route, createBrowserRouter, createRoutesFromElements, BrowserRouter, Link, Outlet } from '@modern-js/runtime/router';
+import {
+  RouterProvider,
+  Route,
+  createBrowserRouter,
+  createRoutesFromElements,
+  BrowserRouter,
+  Link,
+  Outlet,
+} from '@modern-js/runtime/router';
 
 const AppLayout = () => (
   <>
-    <div><Link to={'/table'}>load file-based sub-app</Link></div>
-    <div><Link to={'/dashboard'}>load self-controlled sub-app</Link></div>
-    <div><Link to={'/'}>unmount sub-app</Link></div>
+    <div>
+      <Link to={'/table'}>load file-based sub-app</Link>
+    </div>
+    <div>
+      <Link to={'/dashboard'}>load self-controlled sub-app</Link>
+    </div>
+    <div>
+      <Link to={'/'}>unmount sub-app</Link>
+    </div>
     <Outlet />
   </>
-)
+);
 
 export default () => {
   const { apps, MApp } = useModuleApps();
@@ -103,25 +121,25 @@ export default () => {
               key={app.name}
               path={`${app.name.toLowerCase()}/*`}
               element={
-              <Component
-                loadable={{
-                  loading: ({ pastDelay, error }: any) => {
-                    if (error) {
-                      return <div>error: {error?.message}</div>;
-                    } else if (pastDelay) {
-                      return <div>loading</div>;
-                    } else {
-                      return null;
-                    }
-                  },
-                }}
-              />
+                <Component
+                  loadable={{
+                    loading: ({ pastDelay, error }: any) => {
+                      if (error) {
+                        return <div>error: {error?.message}</div>;
+                      } else if (pastDelay) {
+                        return <div>loading</div>;
+                      } else {
+                        return null;
+                      }
+                    },
+                  }}
+                />
               }
             />
-          )
+          );
         })}
-      </Route>
-    )
+      </Route>,
+    ),
   );
 
   return (
@@ -164,13 +182,10 @@ function App() {
 
 After starting the application in this way, accessing the '/table' route will render the'Table 'sub-application, and accessing the'/dashboard 'route will render the'Dashboard' sub-application.
 
-
 ### Mix Mode
 
-
 Of course, **sub-application components** and **centralized routing** can be mixed.
 
-
 - One molecular application is activated as a **sub-application component**, and the other part is activated as a **centralized routing**.
 - A molecular application can be activated either as a **centralized routing** or as a **sub-application component**.
 
@@ -178,7 +193,6 @@ Of course, **sub-application components** and **centralized routing** can be mix
 
 By configuring the `loadable` configuration, loading components can be added for 「centralized routing」 and 「sub-applicati」, and errors, timeouts, flashes, etc. can be considered, so as to provide users with a better user experience. The design and implementation of this function refer to [react-loadable](https://github.com/jamiebuilds/react-loadable), and the basic functions are similar.
 
-
 ```tsx
 function Loading() {
   return <div>Loading...</div>;

package/docs/en/guides/topic-detail/micro-frontend/c04-communicate.mdx

@@ -2,6 +2,7 @@
 sidebar_position: 4
 title: Communicate
 ---
+
 # Communicate
 
 ## Props

package/docs/en/guides/topic-detail/micro-frontend/c05-mixed-stack.mdx

@@ -2,6 +2,7 @@
 sidebar_position: 5
 title: Mixed Stack
 ---
+
 # Mixed Stack
 
 The Modern.js micro frontend scheme is based on the [Garfish](https://garfishjs.org/) package and provides some more out-of-the-box usage.
@@ -16,7 +17,6 @@ When your main application and sub-application are not all Modern.js application
 **Modern.js** subapps compile to generate a standard [Garfish subapp export](https://www.garfishjs.org/guide/start#2%E5%AF%BC%E5%87%BA-provider-%E5%87%BD%E6%95%B0).
 So you can directly access the standard micro frontend main application.
 
-
 :::info
 The child application is **Modern.js**, when the main application uses the native Garfish micro frontend, the **child application debugging mode** is not available.
 :::

package/docs/en/tutorials/first-app/c02-component.mdx

@@ -1,6 +1,7 @@
 ---
 title: Add UI Components
 ---
+
 # Add UI Components
 
 In the previous chapter, we learned how to initialize a project and use configuration to modify the default behavior of Modern.js.
@@ -9,9 +10,9 @@ In this chapter, we continue to use the project code of the previous chapter and
 
 In order to do better UI display and interaction, we introduce the component library [Antd](https://ant.design/index-cn) to develop, and use the `<List>` component instead of the primitive list. Add dependency first:
 
-```bash
-pnpm add antd
-```
+import { PackageManagerTabs } from '@theme';
+
+<PackageManagerTabs command="add antd" />
 
 Modify `src/routes/page.tsx` to import components at the top:
 

package/docs/zh/apis/app/commands.mdx

@@ -30,7 +30,6 @@ Options:
 $ modern dev
 
 info    Starting dev server...
-info    App running at:
 
   > Local:    http://localhost:8080/
   > Network:  http://192.168.0.1:8080/
@@ -88,12 +87,14 @@ Options:
 
 ```
 Bundle Analyzer saved report to /example/dist/report.html
-File sizes after production build:
 
-  122.35 KB  dist/static/js/885.1d4fbe5a.js
-  2.3 KB     dist/static/js/main.4b8e8d64.js
-  761 B      dist/static/js/runtime-main.edb7cf35.js
-  645 B      dist/static/css/main.0dd3ecc1.css
+info    Production file sizes:
+
+  File                                      Size         Gzipped
+  dist/static/js/lib-react.09721b5c.js      152.6 kB     49.0 kB
+  dist/html/main/index.html                 5.8 kB       2.5 kB
+  dist/static/js/main.3568a38e.js           3.5 kB       1.4 kB
+  dist/static/css/main.03221f72.css         1.4 kB       741 B
 ```
 
 手动在浏览器中打开上述 HTML 文件，可以看到打包产物的瓦片图，并进行包体积分析和优化：
@@ -123,7 +124,7 @@ Options:
 
 ### 添加入口
 
-在应用工程中，执行 `new` 命令添加入口如下：
+在 Modern.js 工程中，执行 `new` 命令添加入口的步骤如下：
 
 ```bash
 $ npx modern new
@@ -134,7 +135,7 @@ $ npx modern new
 
 ### 启用可选功能
 
-在应用工程中，执行 `new` 命令启用可选能力如下：
+在 Modern.js 工程中，执行 `new` 命令启用可选能力的步骤如下：
 
 ```bash
 $ npx modern new
@@ -156,7 +157,7 @@ pnpm 暂不支持使用 JSON 字符串作为参数值，可使用 `npm new` 开
 
 ## modern serve
 
-`modern serve` 命令用于在生产环境下启用应用工程, 注意需要提前执行 [`build`](/apis/app/commands#modern-build) 命令构建出对应产物。
+`modern serve` 命令用于在生产环境下启动 Modern.js 工程, 也可以用于在本地预览生产环境构建的产物。注意你需要提前执行 [`build`](/apis/app/commands#modern-build) 命令构建出对应产物。
 
 ```bash
 Usage: modern serve [options]

package/docs/zh/apis/app/hooks/api/api.mdx

@@ -2,6 +2,7 @@
 title: '**/*.[tj]s'
 sidebar_position: 1
 ---
+
 # **/*.[tj]s
 
 在 [BFF 函数写法](/guides/advanced-features/bff/type.html#函数写法)下，声明 API 路由的文件。除了[某些约定文件](/apis/app/hooks/api/api#白名单)外，`api` 目录下的文件会被注册为接口的路由。
@@ -66,7 +67,7 @@ export const get = async () => {
 
 这样导出函数，则会得到一个 `GET` 接口。
 
-应用工程中支持了 9 个 Method 定义，即：`GET`、`POST`、`PUT`、`DELETE`、`CONNECT`、`TRACE`、`PATCH`、`OPTION`、`HEAD`，即可以用这些 Method 作为函数导出的名字。
+Modern.js 工程中支持了 9 个 Method 定义，即：`GET`、`POST`、`PUT`、`DELETE`、`CONNECT`、`TRACE`、`PATCH`、`OPTION`、`HEAD`，即可以用这些 Method 作为函数导出的名字。
 
 名字是大小不敏感的，就是说，如果是 `GET`，写成 `get`、`Get`、`GEt`、`GET`，都可以准确识别。而默认导出，即 `export default xxx` 则会被映射为 `Get`。
 

package/docs/zh/apis/app/hooks/server/index_.mdx

@@ -2,8 +2,9 @@
 title: index.[tj]s
 sidebar_position: 1
 ---
+
 # index.[tj]s
 
-扩展 Modern.js Web Server 的文件，在此文件中可以给应用工程启动的 Web Server 添加 [Hook](/apis/app/runtime/web-server/hook) 或 [Middleware](/apis/app/runtime/web-server/middleware)。
+扩展 Modern.js Web Server 的文件，在此文件中可以给 Modern.js 工程启动的 Web Server 添加 [Hook](/apis/app/runtime/web-server/hook) 或 [Middleware](/apis/app/runtime/web-server/middleware)。
 
 可以对请求和响应进行拦截处理，鉴权与角色、请求预处理、异常兜底等。也可在内置处理逻辑（包括路由匹配、资源寻址、头部注入、页面渲染，静态 Web 托管）插入特定的业务逻辑。

package/docs/zh/community/blog/2022-0708-updates.md

@@ -10,7 +10,7 @@ Modern.js 7 ~ 8 月的最新版本为 v1.17.0，本双月的主要更新有：
 
 - **支持 React 18**：完成框架和插件对 React 18 的适配。
 - **包版本统一**：Modern.js 所有组成包的版本号进行统一，提供升级命令。
-- **模块工程支持 bundle 构建**：模块工程类型的项目，支持对产物做 bundle 构建。
+- **Modern.js Module 支持 bundle 构建**：Modern.js Module 项目，支持对产物做 bundle 构建。
 - **Reduck v1.1**：发布 Reduck v1.1，使用文档全面更新。
 
 ## 支持 React 18
@@ -33,11 +33,11 @@ Modern.js 框架和相关插件完成对 React 18 的适配。现在，只需要
 npx @modern-js/upgrade
 ```
 
-## 模块工程支持 bundle 构建
+## Modern.js Module 支持 bundle 构建
 
-模块工程（ `@modern-js/module-tools` ）对底层实现进行重构，新增 [`output.buildConfig`](https://modernjs.dev/v1/docs/apis/module/config/output/build-config/) 配置，用于提供更加丰富的构建功能。
+Modern.js Module 对底层实现进行重构，新增 [`output.buildConfig`](https://modernjs.dev/v1/docs/apis/module/config/output/build-config/) 配置，用于提供更加丰富的构建功能。
 
-新的模块工程项目，不仅支持对产物做 bundless 构建，也支持 bundle 构建。通过配置 `buildConfig` 下的 [`buildType`](https://modernjs.dev/v1/docs/apis/module/config/output/build-config/build-type) ，即可进行 bundle 构建：
+新的 Modern.js Module 项目，不仅支持对产物做 bundless 构建，也支持 bundle 构建。通过配置 `buildConfig` 下的 [`buildType`](https://modernjs.dev/v1/docs/apis/module/config/output/build-config/build-type) ，即可进行 bundle 构建：
 
 ```ts title="modern.config.ts"
 import { defineConfig } from '@modern-js/module-tools';

package/docs/zh/community/blog/overview.md

@@ -80,7 +80,7 @@ Modern.js 7 ~ 8 月的最新版本为 v1.17.0，本双月的主要更新有：
 
 - **支持 React 18**：完成框架和插件对 React 18 的适配。
 - **包版本统一**：Modern.js 所有组成包的版本号进行统一，提供升级命令。
-- **模块工程支持 bundle 构建**：模块工程类型的项目，支持对产物做 bundle 构建。
+- **Modern.js Module 支持 bundle 构建**：Modern.js Module 项目，支持对产物做 bundle 构建。
 - **Reduck v1.1**：发布 [Reduck v1.1](https://github.com/web-infra-dev/reduck)，使用文档全面更新。
 
 [了解更多 →](/community/blog/2022-0708-updates)

package/docs/zh/components/debug-app.mdx

@@ -6,12 +6,10 @@ $ pnpm run dev
 > modern dev
 
 info    Starting dev server...
-info    App running at:
+ready   Client compiled in 50ms
 
   > Local:    http://localhost:8080/
   > Network:  http://192.168.0.1:8080/
-
- Client ✔ done in 76.10ms
 ```
 
 在浏览器中打开 `http://localhost:8000/`，可以看到页面内容。

package/docs/zh/components/global-proxy-config.mdx

@@ -7,16 +7,9 @@
 
 使用该选项前，你需要提前安装和注册 `@modern-js/plugin-proxy` 插件：
 
-```bash
-# npm
-npm add @modern-js/plugin-proxy -D
-
-# yarn
-yarn add @modern-js/plugin-proxy -D
+import { PackageManagerTabs } from '@theme';
 
-# pnpm
-pnpm add @modern-js/plugin-proxy -D
-```
+<PackageManagerTabs command="add @modern-js/plugin-proxy -D" />
 
 安装完成后，在 `modern.config.ts` 文件中注册插件：
 
@@ -75,13 +68,11 @@ module.exports = {
 执行 `dev`, 提示如下时，即代理服务器启动成功：
 
 ```bash
-  App running at:
-
   Local:    http://localhost:8080/
   Network:  http://192.168.0.1:8080/
 
-ℹ  info      Starting the proxy server.....
-✔  success   Proxy Server start on localhost:8899
+info      Starting proxy server.....
+success   Proxy server start on localhost:8899
 ```
 
 访问 `localhost:8899`, 可以在 UI 界面上查看 Network 以及配置代理规则：

package/docs/zh/components/global-proxy.mdx

@@ -11,13 +11,11 @@ Modern.js 提供了开箱即用的全局代理插件 `@modern-js/plugin-proxy`
 安装代理插件并配置代理规则后， 执行 `pnpm run dev` 命令：
 
 ```bash
-  App running at:
-
   Local:    http://localhost:8080/
   Network:  http://192.168.0.1:8080/
 
-ℹ  info      Starting the proxy server.....
-✔  success   Proxy Server start on localhost:8899
+info      Starting proxy server.....
+success   Proxy server start on localhost:8899
 ```
 
 在控制台中可以看到代理服务器成功启动。

package/docs/zh/components/tech-stack-node-framework.mdx

@@ -0,0 +1 @@
+Modern.js 支持 [Express.js](https://expressjs.com/) 和 [Koa.js](https://koajs.com/) 作为可选的 BFF 运行时框架，请参考[「BFF - 运行时框架」](/guides/advanced-features/bff/frameworks.html)。

package/docs/zh/configure/app/builder-plugins.mdx

@@ -18,7 +18,7 @@ Modern.js Builder 是 Modern.js 底层的构建工具，请阅读 [构建能力]
 该选项**用于配置 Modern.js Builder 构建插件**，如果你需要配置其他类型的插件，请选择对应的配置方式：
 
 - 配置 Modern.js 框架插件，请使用 [plugins](/configure/app/plugins) 配置项。
-- 配置 webpack 插件，请使用 [tools.webpack](/configure/app/tools/webpack) 或 [tools.webpackChain](/configure/app/tools/webpack-chain) 配置项。
+- 配置 Rspack 或 webpack 插件，请使用 [tools.bundlerChain](/configure/app/tools/bundler-chain) 配置项。
 - 配置 Babel 插件，请使用 [tools.babel](/configure/app/tools/babel) 配置项。
 
 ## 何时使用

package/docs/zh/configure/app/plugins.mdx

@@ -16,8 +16,7 @@ sidebar_position: 9
 该选项**用于配置框架插件**，如果你需要配置其他类型的插件，请选择对应的配置方式：
 
 - 配置 Modern.js Builder 插件，请使用 [builderPlugins](/configure/app/builder-plugins) 配置项。
-- 配置 webpack 插件，请使用 [tools.webpack](/configure/app/tools/webpack)、[tools.webpackChain](/configure/app/tools/webpack-chain) 或 [tools.bundlerChain](/configure/app/tools/bundler-chain) 配置项。
-- 配置 Rspack 插件，请使用 [tools.rspack](/configure/app/tools/rspack) 或 [tools.bundlerChain](/configure/app/tools/bundler-chain) 配置项。
+- 配置 Rspack 或 webpack 插件，请使用 [tools.bundlerChain](/configure/app/tools/bundler-chain) 配置项。
 - 配置 Babel 插件，请使用 [tools.babel](/configure/app/tools/babel) 配置项。
 
 ## 插件类型

package/docs/zh/configure/app/server/base-url.mdx

@@ -25,8 +25,6 @@ export default defineConfig({
 `dev` 之后可以看到路由访问会加上对应前缀:
 
 ```bash
-App running at:
-
   > Local:    http://localhost:8080/base/
   > Network:  http://192.168.0.1:8080/base/
 ```

package/docs/zh/configure/app/source/enable-async-entry.mdx

@@ -49,6 +49,6 @@ import('./bootstrap.jsx');
 此时，就可以在当前页面中消费任意的远程模块了。
 
 :::info
-Modern.js 未对 webpack 的 ModuleFederationPlugin 进行封装，请通过 [tools.webpackChain](/configure/app/tools/webpack-chain) 自行配置 ModuleFederationPlugin。
+Modern.js 未对 ModuleFederationPlugin 进行封装，请通过 [tools.bundlerChain](/configure/app/tools/bundler-chain) 自行配置 ModuleFederationPlugin。
 
 :::

package/docs/zh/guides/advanced-features/eslint.mdx

@@ -74,7 +74,7 @@ pnpm run lint:error
 
 ### `src/.eslintrc.js` 文件
 
-Modern.js 的应用工程、模块工程，源代码目录里都会默认有这个配置文件，是针对 Universal JS 代码设计的。
+Modern.js Framework、Modern.js Module 的源代码目录里都会默认有这个配置文件，是针对 Universal JS 代码设计的。
 
 :::info
 Universal JS 代码是既能浏览器端也能在服务器端运行的代码。

package/docs/zh/guides/basic-features/alias.mdx

@@ -1,67 +1,28 @@
 ---
-sidebar_position: 3
+sidebar_position: 4
 ---
 
 # 路径别名
 
-Modern.js 允许在 JS 和 CSS 中使用别名导入自定义目录下的模块，并内置了以下别名:
+import Alias from '@modern-js/builder-doc/docs/zh/shared/alias';
 
-```js
-{
-  '@': '<appDirectory>/src',
-  '@shared': '<appDirectory>/shared',
-}
-```
-
-:::info
-在开启可选功能时，new 命令也会动态的添加内置别名，例如启用 BFF 时默认会添加 `@api` 别名。
+<Alias />
 
-:::
+## 默认别名
 
-例如从 `src/App.tsx` 文件中导入 `src/common` 目录下的模块：
-
-```bash
-.
-├── common
-│   ├── styles
-│   │   └── base.css
-│   └── utils
-│       └── index.ts
-└── App.tsx
-```
-
-`src/App.tsx` 中写法如下：
-
-```ts
-import utils from '@/src/common/utils';
-import '@/src/common/styles/base.css';
-```
-
-Modern.js 也提供了自定义别名的方式，以添加 `@common` 别名为例：
-
-对于 TypeScript 项目，只需要在项目根目录 `tsconfig.json` 下配置 `compilerOptions.paths`：
+Modern.js 框架内置了以下别名:
 
 ```json
 {
-  "compilerOptions": {
-    "paths": {
-      "@/*": ["./src/*"],
-      "@/common/*": ["./src/common/*"]
-    }
-  }
+  "@": "./src",
+  "@shared": "./shared"
 }
 ```
 
-JavaScript 项目可以在 `modern.config.js` 中配置 [`source.alias`](/configure/app/source/alias)：
+此外，在启用框架的 BFF 插件时，默认会添加 `@api` 别名。
 
-```ts title="modern.config.ts"
-export default defineConfig({
-  source: {
-    alias: {
-      '@common': './src/common',
-    },
-  },
-});
+```json
+{
+  "@api": "./api"
+}
 ```
-
-对于别名配置的具体用法，请参考 [source.alias 文档](/configure/app/source/alias)。

package/docs/zh/guides/basic-features/css.mdx

@@ -1,5 +1,5 @@
 ---
-sidebar_position: 2
+sidebar_position: 1
 ---
 
 # 样式开发
@@ -61,16 +61,31 @@ Modern.js 内部集成了 Babel 的 [babel-plugin-styled-components](https://git
 
 ## 使用 Tailwind CSS
 
-[Tailwind CSS](https://tailwindcss.com/) 是一个以 Utility Class 为基础的 CSS 框架和设计系统，可以快速地为组件添加常用样式，同时支持主题样式的灵活扩展。在 Modern.js 中使用 [Tailwind CSS](https://tailwindcss.com/)，只需要在项目根目录下执行 `pnpm run new` 并开启。
+[Tailwind CSS](https://tailwindcss.com/) 是一个以 Utility Class 为基础的 CSS 框架和设计系统，可以快速地为组件添加常用样式，同时支持主题样式的灵活扩展。
 
-按照如下进行选择：
+在 Modern.js 中使用 [Tailwind CSS](https://tailwindcss.com/)，你只需要按照以下步骤操作：
+
+1. 在项目根目录下执行 `pnpm run new`，按照如下进行选择：
 
 ```text
 ? 请选择你想要的操作 启用可选功能
 ? 请选择功能名称 启用 「Tailwind CSS」 支持
 ```
 
-在 `modern.config.ts` 中注册 Tailwind 插件:
+成功开启后，会看到 `package.json` 中新增了依赖：
+
+```json title="./package.json"
+{
+  "dependencies": {
+    "tailwindcss": "^3.0.0"
+  },
+  "devDependencies": {
+    "@modern-js/plugin-tailwindcss": "^2.0.0"
+  }
+}
+```
+
+2. 在 `modern.config.ts` 中注册 Tailwind 插件:
 
 ```ts title="modern.config.ts"
 import { tailwindcssPlugin } from '@modern-js/plugin-tailwindcss';
@@ -80,29 +95,34 @@ export default defineConfig({
 });
 ```
 
-使用时在入口的根组件(如 `src/App.jsx`)添加如下代码：
+3. 创建 `index.css` 文件，添加以下代码：
+
+```css title="index.css"
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+```
+
+:::info
+根据需求不同，你可以选择性地导入 Tailwind CSS 提供的 CSS 样式。请参考 [`@tailwind` 文档](https://tailwindcss.com/docs/functions-and-directives#tailwind) 来了解 `@tailwind` 指令的详细用法。
+:::
+
+4. 引用 `index.css` 文件，比如在入口的根组件 `src/App.jsx` 添加如下代码：
 
 ```js
-import 'tailwindcss/base.css';
-import 'tailwindcss/components.css';
-import 'tailwindcss/utilities.css';
+import './index.css';
 ```
 
-然后即可在各个组件中使用 Tailwind CSS 提供的 Utility Class 了：
+5. 然后即可在各个组件中使用 Tailwind CSS 提供的 Utility Class 了：
 
 ```tsx
-const App = () => (
+const Hello = () => (
   <div className="h-12 w-48">
     <p className="text-xl font-medium text-black">hello world</p>
   </div>
 );
 ```
 
-:::info 补充信息
-根据需求不同，你可以选择性的导入 Tailwind CSS 提供的 CSS 文件。由于使用 `@tailwind` 与直接导入 CSS 文件的作用等价，因此关于 Tailwind CSS 提供的 CSS 文件的用途，可以参考 [`@tailwind` 的使用](https://tailwindcss.com/docs/functions-and-directives#tailwind) 文档中注释里的内容。
-
-:::
-
 ### 配置 Tailwind CSS
 
 在 Modern.js 中，你有两种方式来配置 Tailwind CSS：