@modern-js/main-doc 2.35.0 → 2.35.1

package/docs/en/guides/topic-detail/micro-frontend/c02-development.mdx

@@ -13,6 +13,7 @@ Through this chapter you can learn:
 ## Create an app
 
 Currently supports two routing modes
+
 - Self-controlled routing
 - Conventional routing
 
@@ -20,7 +21,6 @@ First, clarify the routing mode of the main application [create a file-based rou
 
 In this experience we will create two sub-applications Table and Dashboard for the main application (Table is reduced routing, Dashboard is self-controlled routing)
 
-
 ### File-based Routing Main App
 
 Initialize the project with a command line:
@@ -39,11 +39,12 @@ After the project is created, we can enable the `micro frontend` through `pnpm r
 
 Next, let's register the micro frontend plugin and add the main micro frontend app and add the list of sub-apps:
 
-import EnableMicroFrontend from "@site-docs-en/components/enable-micro-frontend";
+import EnableMicroFrontend from '@site-docs-en/components/enable-micro-frontend';
 
 <EnableMicroFrontend />
 
 Then we create two new directories in the routes folder
+
 - table (for loading conventional routing sub-applications)
 - dashboard (for loading self-controlled routing sub-applications)
 
@@ -61,8 +62,8 @@ const Index = () => {
     <div>
       <Table />
     </div>
-  )
-}
+  );
+};
 
 export default Index;
 ```
@@ -79,11 +80,12 @@ const Index = () => {
     <div>
       <Dashboard />
     </div>
-  )
-}
+  );
+};
 
 export default Index;
 ```
+
 #### route link
 
 At this time, the main application configuration has been completed, and the sub-application can be loaded through the route, and the `layout.tsx` of the main application can be modified to jump to the route:
@@ -93,9 +95,15 @@ import { Outlet, Link } from '@modern-js/runtime/router';
 
 const Layout = () => (
   <div>
-    <div><Link to={'/table'}>Load file-base routing sub-app</Link></div>
-    <div><Link to={'/dashboard'}>Load self-controlled routing sub-app</Link></div>
-    <div><Link to={'/'}>unmount sub-app</Link></div>
+    <div>
+      <Link to={'/table'}>Load file-base routing sub-app</Link>
+    </div>
+    <div>
+      <Link to={'/dashboard'}>Load self-controlled routing sub-app</Link>
+    </div>
+    <div>
+      <Link to={'/'}>unmount sub-app</Link>
+    </div>
     <Outlet />
   </div>
 );
@@ -127,7 +135,7 @@ Since it is a self-controlled route, we delete the `routes/` folder and add the
 
 #### Load sub-app
 
-import CustomRouterMicroFrontend from "@site-docs-en/components/custom-router-micro-frontend";
+import CustomRouterMicroFrontend from '@site-docs-en/components/custom-router-micro-frontend';
 
 <CustomRouterMicroFrontend />
 
@@ -155,7 +163,7 @@ import { garfishPlugin } from '@modern-js/plugin-garfish';
 
 export default defineConfig({
   dev: {
-    port: 8081
+    port: 8081,
   },
   runtime: {
     router: true,
@@ -172,10 +180,8 @@ add `src/routes/page.tsx`:
 
 ```js title="src/routes/page.tsx"
 const Index = () => {
-  return (
-    <div className="container-box">subApp</div>
-  )
-}
+  return <div className="container-box">subApp</div>;
+};
 
 export default Index;
 ```
@@ -204,7 +210,7 @@ import { garfishPlugin } from '@modern-js/plugin-garfish';
 
 export default defineConfig({
   dev: {
-    port: 8082
+    port: 8082,
   },
   runtime: {
     router: true,
@@ -224,7 +230,7 @@ And add code in `src/App.tsx`, note that you need to parse from `props` and pass
 ```js title="src/App.tsx"
 import { BrowserRouter, Route, Routes } from '@modern-js/runtime/router';
 
-export default (props: {basename: string}) => {
+export default (props: { basename: string }) => {
   const { basename } = props;
 
   return (
@@ -241,6 +247,7 @@ export default (props: {basename: string}) => {
 ## Debug
 
 Start the application by executing the `pnpm run dev` command in the directory in sequence:
+
 - masterApp `http://localhost:8080`
 - table subapplication (conventional routing) `http://localhost:8081`
 - dashboard subapplication (self-controlled routing) `http://localhost:8082`

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/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/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/basic-features/alias.mdx

@@ -1,5 +1,5 @@
 ---
-sidebar_position: 3
+sidebar_position: 4
 ---
 
 # 路径别名

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：