From eff3fb1d94a2e9c2471c697d4f18a6bf3f65756d Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan.jait@bytedance.com>
Date: Mon, 18 Sep 2023 16:35:14 +0800
Subject: [PATCH] docs(module): improve Tailwind CSS usage guide (#4668)

* docs(module): improve Tailwind CSS usage guide

* docs: update
---
 .../src/core/createCompiler.ts                |   2 +-
 .../ProgressPlugin/helpers/bar.ts             |   2 +-
 .../docs/en/guides/basic-features/css.mdx     |  48 +++-
 .../docs/zh/guides/basic-features/css.mdx     |  48 +++-
 .../guide/best-practices/use-tailwindcss.mdx  | 237 ++++++++++-------
 .../guide/best-practices/use-tailwindcss.mdx  | 239 +++++++++++-------
 .../solutions/app-tools/src/commands/build.ts |   2 +-
 7 files changed, 362 insertions(+), 216 deletions(-)

diff --git a/packages/builder/builder-rspack-provider/src/core/createCompiler.ts b/packages/builder/builder-rspack-provider/src/core/createCompiler.ts
index e2ec8c24bc46..1a5c6a1cc4b7 100644
--- a/packages/builder/builder-rspack-provider/src/core/createCompiler.ts
+++ b/packages/builder/builder-rspack-provider/src/core/createCompiler.ts
@@ -43,7 +43,7 @@ export async function createCompiler({
             ? context.target[index]
             : context.target;
           const name = TARGET_ID_MAP[target || 'web'];
-          logger.log(color(`✔ ${name}  succeed in`, time));
+          logger.log(color(`✔ ${name}  compiled in`, time));
         }
       });
     }
diff --git a/packages/builder/builder-webpack-provider/src/webpackPlugins/ProgressPlugin/helpers/bar.ts b/packages/builder/builder-webpack-provider/src/webpackPlugins/ProgressPlugin/helpers/bar.ts
index 1000801ab016..1649d7160534 100644
--- a/packages/builder/builder-webpack-provider/src/webpackPlugins/ProgressPlugin/helpers/bar.ts
+++ b/packages/builder/builder-webpack-provider/src/webpackPlugins/ProgressPlugin/helpers/bar.ts
@@ -12,7 +12,7 @@ const defaultOption: Props = {
   width: 25,
   buildIcon: '◯',
   finishIcon: '✔',
-  finishInfo: 'succeed',
+  finishInfo: 'compiled',
   errorIcon: '✖',
   errorInfo: 'compile failed',
   message: '',
diff --git a/packages/document/main-doc/docs/en/guides/basic-features/css.mdx b/packages/document/main-doc/docs/en/guides/basic-features/css.mdx
index 126804621b9b..2320df12cda0 100644
--- a/packages/document/main-doc/docs/en/guides/basic-features/css.mdx
+++ b/packages/document/main-doc/docs/en/guides/basic-features/css.mdx
@@ -61,16 +61,31 @@ If you need to use other CSS-in-JS libraries such as [styled-jsx](https://www.np
 
 ## Using Tailwind CSS
 
-[Tailwind CSS](https://tailwindcss.com/) is a CSS framework and design system based on Utility Class, which can quickly add common styles to components, and support flexible extension of theme styles. To use [Tailwind CSS](https://tailwindcss.com/) in Modern.js, simply run `pnpm run new` in the project root directory and enable it.
+[Tailwind CSS](https://tailwindcss.com/) is a CSS framework and design system based on Utility Class, which can quickly add common styles to components, and support flexible extension of theme styles.
 
-Follow the steps below to make a selection:
+To use [Tailwind CSS](https://tailwindcss.com/) in Modern.js, you can follow the steps below:
+
+1. Run `pnpm run new` in the root directory of your project and make the following selections:
 
 ```text
 ? Please select the operation you want: Enable features
 ? Please select the feature name: Enable Tailwind CSS
 ```
 
-Register the Tailwind plugin in `modern.config.ts`:
+After successful initialization, you will see the following additions to the `package.json` file:
+
+```json title="./package.json"
+{
+  "dependencies": {
+    "tailwindcss": "^3.0.0"
+  },
+  "devDependencies": {
+    "@modern-js/plugin-tailwindcss": "^2.0.0"
+  }
+}
+```
+
+2. Register the Tailwind plugin in `modern.config.ts`:
 
 ```ts title="modern.config.ts"
 import { tailwindcssPlugin } from '@modern-js/plugin-tailwindcss';
@@ -80,29 +95,34 @@ export default defineConfig({
 });
 ```
 
-To use, add the following code to the root component (such as `src/App.jsx`) of the entry:
+3. Create a `index.css` file and add the following code:
+
+```css title="index.css"
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+```
+
+:::info
+Depending on your needs, you can selectively import the CSS styles provided by Tailwind CSS. Please refer to the [`@tailwind` documentation](https://tailwindcss.com/docs/functions-and-directives#tailwind) for detailed usage of the `@tailwind` directive.
+:::
+
+4. Import the `index.css` file, for example, add the following code in the root component `src/App.jsx`:
 
 ```js
-import 'tailwindcss/base.css';
-import 'tailwindcss/components.css';
-import 'tailwindcss/utilities.css';
+import './index.css';
 ```
 
-Then you can use the Utility Class provided by Tailwind CSS in each component:
+5. Now you can use the Utility Classes provided by Tailwind CSS in your components:
 
 ```tsx
-const App = () => (
+const Hello = () => (
   <div className="h-12 w-48">
     <p className="text-xl font-medium text-black">hello world</p>
   </div>
 );
 ```
 
-:::info Additional Information
-Depending on your needs, you can selectively import the CSS files provided by Tailwind CSS. Since using `@tailwind` is equivalent to directly importing CSS files, you can refer to the comments in the [`@tailwind` usage](https://tailwindcss.com/docs/functions-and-directives#tailwind) documentation for the purpose of the CSS files provided by Tailwind CSS.
-
-:::
-
 ### Configuring Tailwind CSS
 
 In Modern.js, you have two ways to configure Tailwind CSS:
diff --git a/packages/document/main-doc/docs/zh/guides/basic-features/css.mdx b/packages/document/main-doc/docs/zh/guides/basic-features/css.mdx
index e98dcc909196..fb1a2b6f19bc 100644
--- a/packages/document/main-doc/docs/zh/guides/basic-features/css.mdx
+++ b/packages/document/main-doc/docs/zh/guides/basic-features/css.mdx
@@ -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：
diff --git a/packages/document/module-doc/docs/en/guide/best-practices/use-tailwindcss.mdx b/packages/document/module-doc/docs/en/guide/best-practices/use-tailwindcss.mdx
index bfa03338b3d6..db48953ac8cf 100644
--- a/packages/document/module-doc/docs/en/guide/best-practices/use-tailwindcss.mdx
+++ b/packages/document/module-doc/docs/en/guide/best-practices/use-tailwindcss.mdx
@@ -10,38 +10,67 @@ Modern.js Module supports developing component styles using Tailwind CSS.
 
 ## Enabling Tailwind CSS
 
-By default, Modern.js Module does not have this feature enabled. You can enable it by following the steps below.
+To use [Tailwind CSS](https://tailwindcss.com/) in Modern.js Module, you can follow the steps below:
 
-1. Execute the `new` command in the project root directory to enable Tailwind CSS.
-
-```text title="Terminal"
-pnpm run new
+1. Run `pnpm run new` in the root directory of your project and make the following selections:
 
+```text
 ? Please select the operation you want: Enable features
 ? Please select the feature name: Enable Tailwind CSS
 ```
 
-2. After successful enabling, you will see a new dependency added to `package.json`.
+After successful initialization, you will see the following additions to the `package.json` file:
 
 ```json title="./package.json"
 {
+  "dependencies": {
+    "tailwindcss": "^3.0.0"
+  },
   "devDependencies": {
-    "@modern-js/plugin-tailwindcss": "x.y.z"
+    "@modern-js/plugin-tailwindcss": "^2.0.0"
   }
 }
 ```
 
-3. Finally, you need to manually register the `tailwindcssPlugin` in the configuration file:
+2. Register the Tailwind plugin in `modern.config.ts`:
 
 ```ts title="modern.config.ts"
-import { moduleTools, defineConfig } from '@modern-js/module-tools';
 import { tailwindcssPlugin } from '@modern-js/plugin-tailwindcss';
 
 export default defineConfig({
-  plugins: [moduleTools(), tailwindPlugin()],
+  plugins: [..., tailwindcssPlugin()],
 });
 ```
 
+3. Create a `index.css` file and add the following code:
+
+```css title="index.css"
+/* base and components are optional, please add as appropriate */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+```
+
+:::info
+Depending on your needs, you can selectively import the CSS styles provided by Tailwind CSS. Please refer to the [`@tailwind` documentation](https://tailwindcss.com/docs/functions-and-directives#tailwind) for detailed usage of the `@tailwind` directive.
+:::
+
+4. Import the `index.css` file, for example, add the following code in the root component `src/index.jsx`:
+
+```js
+import './index.css';
+```
+
+5. Now you can use the Utility Classes provided by Tailwind CSS in your components:
+
+```tsx
+const Hello = () => (
+  <div className="h-12 w-48">
+    <p className="text-xl font-medium text-black">hello world</p>
+  </div>
+);
+```
+
 ## Configuring Tailwind CSS
 
 In Modern.js Module, you have two ways to configure Tailwind CSS:
@@ -83,37 +112,129 @@ You can follow the steps below to enable the autocomplete feature:
 1. Install the [Tailwind CSS IntelliSense](https://github.com/tailwindlabs/tailwindcss-intellisense) extension in VS Code.
 2. If the root directory of your project does not have a `tailwind.config.{ts,js}` file, you need to create one and write the Tailwind CSS configuration for your current project. Otherwise, the IDE plugin will not work correctly.
 
-## Usage Introduction
+## Build Modes
+
+When using Tailwind CSS, please note that there are significant differences between the bundle and bundleless modes in terms of the build artifacts.
+
+:::tip
+For definitions of bundle and bundleless, please refer to the ["In-depth understanding of build"](/guide/advance/in-depth-about-build).
+:::
+
+### Bundle Mode
+
+In Bundle mode, a separate CSS file is generated, and the JS output does not automatically reference the CSS output file.
+
+- Source code:
+
+```tsx title="./src/index.tsx"
+import './index.css';
+
+export default () => {
+  return <div className="bg-black">hello world</div>;
+};
+```
+
+- Output code:
+
+```js title="./dist/es/index.js"
+// src/index.tsx
+import { jsx } from 'react/jsx-runtime';
+var src_default = () => {
+  return /* @__PURE__ */ jsx('div', {
+    className: 'bg-black',
+    children: 'hello world',
+  });
+};
+export { src_default as default };
+```
+
+```css title="./dist/es/index.css"
+.bg-black {
+  --tw-bg-opacity: 1;
+  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+}
+/** some more... */
+```
+
+If you need to inject styles into the JS artifact, you can enable the [style.inject](/api/config/build-config#styleinject) option.
 
-Tailwind CSS provides two ways of usage:
+If you haven't enabled `style.inject`, you can also let users manually import the CSS file:
+
+```js
+import 'your-package/dist/es/index.css';
+```
+
+### Bundleless Mode
+
+In bundleless mode, the CSS file is automatically imported in the artifact code without the need for additional processing.
+
+- Output code:
+
+```js title="./dist/es/index.js"
+import { jsx as _jsx } from 'react/jsx-runtime';
+import './index.css';
+export default () =>
+  /* @__PURE__ */ _jsx('div', {
+    className: 'bg-black',
+    children: 'hello world',
+  });
+```
+
+## Class Name Prefix
+
+You can add a class name prefix using the [prefix](https://tailwindcss.com/docs/configuration#prefix) option provided by Tailwind CSS. This helps avoid potential class name conflicts, such as when different versions of Tailwind CSS are used in different parts of an application or module.
+
+For example, you can add the `foo-` prefix using the `prefix` option in `tailwind.config.js`:
+
+```js title="tailwind.config.js"
+module.exports = {
+  prefix: 'foo-',
+};
+```
+
+- Source Code:
+
+```tsx title="./src/index.tsx"
+import './index.css';
+
+export default () => {
+  return <div className="foo-bg-black">hello world</div>;
+};
+```
+
+- Output Code:
+
+```css title="./dist/es/index.css"
+.foo-bg-black {
+  --tw-bg-opacity: 1;
+  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+}
+/** some more... */
+```
+
+## Usage Guide
+
+Here are some usage examples of Tailwind CSS.
 
 ### HTML Class Names
 
-Tailwind CSS supports adding styles by using class names on HTML tags. **When using HTML class names, make sure to import the corresponding CSS file of Tailwind CSS.**
+Tailwind CSS supports adding styles to HTML tags through class names. **When using HTML class names, please note that the corresponding CSS styles of Tailwind CSS must be imported in advance.**
 
 ```tsx title="./src/index.tsx"
-import 'tailwindcss/utilities.css';
+import './index.css';
 
 export default () => {
-  return <div className="bg-black text-white">hello world</div>;
+  return <div className="bg-black">hello world</div>;
 };
 ```
 
 Generated styles (after bundling):
 
 ```css title="./dist/es/index.css"
-/* node_modules/tailwindcss/utilities.css */
-.table {
-  display: table;
-}
 .bg-black {
   --tw-bg-opacity: 1;
   background-color: rgba(0, 0, 0, var(--tw-bg-opacity));
 }
-.text-white {
-  --tw-text-opacity: 1;
-  color: rgba(255, 255, 255, var(--tw-text-opacity));
-}
 /** some more... */
 ```
 
@@ -191,75 +312,7 @@ When using Tailwind with Less, you cannot nest Tailwind's `@screen` directive.
 }
 ```
 
-### Recommended Approach
-
-**It is recommended to develop styles using the `@apply` directive so that the resulting styles only include the inline styles specified by the directive.**
-
-When adding styles using HTML class names, by default, Tailwind includes not only the styles corresponding to the class names but also additional style code. Although these additional code may not affect the styles themselves.
-
-### Difference between Bundle and Bundleless Builds
-
-For the following code, there is a significant difference in the build output between bundle and bundleless modes.
-
-> For more information about bundle and bundleless, refer to [Bundle and Bundleless](/guide/advance/in-depth-about-build#bundle--bundleless)
-
-```tsx title="./src/index.tsx"
-import 'tailwindcss/utilities.css';
-
-export default () => {
-  return <div className="bg-black text-white">hello world11</div>;
-};
-```
-
-In the Bundle mode, third-party dependencies are bundled together.
-
-For styles, a separate output file is generated, and there is no import code related to styles in the JS output file.
-
-To inject styles into the JS output, you can enable the [`style.inject`](/api/config/build-config#styleinject) option.
-
-```css title="./dist/es/index.css"
-/* node_modules/tailwindcss/utilities.css */
-.table {
-  display: table;
-}
-.bg-black {
-  --tw-bg-opacity: 1;
-  background-color: rgba(0, 0, 0, var(--tw-bg-opacity));
-}
-.text-white {
-  --tw-text-opacity: 1;
-  color: rgba(255, 255, 255, var(--tw-text-opacity));
-}
-/** some more... */
-```
-
-```js title="./dist/es/index.js"
-// src/index.tsx
-import { jsx } from 'react/jsx-runtime';
-var src_default = () => {
-  return /* @__PURE__ */ jsx('div', {
-    className: 'bg-black text-white',
-    children: 'hello world11',
-  });
-};
-export { src_default as default };
-```
-
-In Bundleless mode, third-party dependencies are not bundled together, and no style artifacts will be generated.
-
-```js title="./dist/es/index.js"
-import { jsx } from 'react/jsx-runtime';
-import 'tailwindcss/utilities.css';
-var src_default = () => {
-  return /* @__PURE__ */ jsx('div', {
-    className: 'bg-black text-white',
-    children: 'hello world11',
-  });
-};
-export { src_default as default };
-```
-
-### About `designSystem` config
+## About `designSystem` config
 
 `designSystem` is a deprecated configuration option in Modern.js Module.
 
diff --git a/packages/document/module-doc/docs/zh/guide/best-practices/use-tailwindcss.mdx b/packages/document/module-doc/docs/zh/guide/best-practices/use-tailwindcss.mdx
index a0383e2e177d..a2b1c9c09f7f 100644
--- a/packages/document/module-doc/docs/zh/guide/best-practices/use-tailwindcss.mdx
+++ b/packages/document/module-doc/docs/zh/guide/best-practices/use-tailwindcss.mdx
@@ -10,38 +10,67 @@ Modern.js Module 支持使用 Tailwind CSS 开发组件样式。
 
 ## 启用 Tailwind CSS
 
-默认情况下，Modern.js Module 没有开启该功能，需要按照下面的方式开启它。
+在 Modern.js Module 中使用 [Tailwind CSS](https://tailwindcss.com/)，你只需要按照以下步骤操作：
 
-1. 在项目根目录下执行 `new` 命令，可以开启 Tailwind CSS 功能。
+1. 在项目根目录下执行 `pnpm run new`，按照如下进行选择：
 
-```text title="终端"
-pnpm run new
-
-? 请选择你想要的操作：启用可选功能
-? 请选择功能名称：启用 「Tailwind CSS」 支持
+```text
+? 请选择你想要的操作 启用可选功能
+? 请选择功能名称 启用 「Tailwind CSS」 支持
 ```
 
-2. 成功开启后，会看到 `package.json` 中新增了依赖。
+成功开启后，会看到 `package.json` 中新增了依赖：
 
 ```json title="./package.json"
 {
+  "dependencies": {
+    "tailwindcss": "^3.0.0"
+  },
   "devDependencies": {
-    "@modern-js/plugin-tailwindcss": "x.y.z"
+    "@modern-js/plugin-tailwindcss": "^2.0.0"
   }
 }
 ```
 
-3. 最后，需要手动在配置文件中注册 `tailwindcssPlugin`:
+2. 在 `modern.config.ts` 中注册 Tailwind 插件:
 
 ```ts title="modern.config.ts"
-import { moduleTools, defineConfig } from '@modern-js/module-tools';
 import { tailwindcssPlugin } from '@modern-js/plugin-tailwindcss';
 
 export default defineConfig({
-  plugins: [moduleTools(), tailwindPlugin()],
+  plugins: [..., tailwindcssPlugin()],
 });
 ```
 
+3. 创建 `index.css` 文件，添加以下代码：
+
+```css title="index.css"
+/* base 和 components 是可选的，请酌情添加 */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+```
+
+:::info
+根据需求不同，你可以选择性地导入 Tailwind CSS 提供的 CSS 样式。请参考 [`@tailwind` 文档](https://tailwindcss.com/docs/functions-and-directives#tailwind) 来了解 `@tailwind` 指令的详细用法。
+:::
+
+4. 引用 `index.css` 文件，比如在入口的 `src/index.jsx` 文件添加如下代码：
+
+```js
+import './index.css';
+```
+
+5. 然后即可在各个组件中使用 Tailwind CSS 提供的 Utility Class 了：
+
+```tsx
+const Hello = () => (
+  <div className="h-12 w-48">
+    <p className="text-xl font-medium text-black">hello world</p>
+  </div>
+);
+```
+
 ## 配置 Tailwind CSS
 
 在 Modern.js Module 中，你有两种方式来配置 Tailwind CSS：
@@ -83,37 +112,129 @@ Tailwind CSS 官方提供了 [Tailwind CSS IntelliSense](https://github.com/tail
 1. 在 VS Code 中安装 [Tailwind CSS IntelliSense](https://github.com/tailwindlabs/tailwindcss-intellisense) 插件。
 2. 如果项目的根目录没有 `tailwind.config.{ts,js}` 文件，那么你需要创建该文件，并写入当前项目的 Tailwind CSS 配置，否则 IDE 插件将无法正确生效。
 
+## 构建模式
+
+在使用 Tailwind CSS 时，请注意构建产物在 bundle 和 bundleless 两种模式下会有很大区别。
+
+:::tip
+关于 bundle 和 bundleless 的定义，可以查看 [「深入理解构建」](/guide/advance/in-depth-about-build)
+:::
+
+### Bundle 模式
+
+在 Bundle 模式下，会生成一份单独的产物 CSS 文件，并且 JS 产物不会自动引用产物 CSS 文件。
+
+- 源代码：
+
+```tsx title="./src/index.tsx"
+import './index.css';
+
+export default () => {
+  return <div className="bg-black">hello world</div>;
+};
+```
+
+- 产物代码：
+
+```js title="./dist/es/index.js"
+// src/index.tsx
+import { jsx } from 'react/jsx-runtime';
+var src_default = () => {
+  return /* @__PURE__ */ jsx('div', {
+    className: 'bg-black',
+    children: 'hello world',
+  });
+};
+export { src_default as default };
+```
+
+```css title="./dist/es/index.css"
+.bg-black {
+  --tw-bg-opacity: 1;
+  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+}
+/** some more... */
+```
+
+如果你需要将样式注入 JS 产物中，可以开启 [style.inject](/api/config/build-config#styleinject) 选项。
+
+如果你没有开启 `style.inject`，那么也可以让用户手动引用产物 CSS 文件：
+
+```js
+import 'your-package/dist/es/index.css';
+```
+
+### Bundleless 模式
+
+在 Bundleless 模式下，默认会引用产物 CSS 文件，无须进行额外处理。
+
+- 产物代码：
+
+```js title="./dist/es/index.js"
+import { jsx as _jsx } from 'react/jsx-runtime';
+import './index.css';
+export default () =>
+  /* @__PURE__ */ _jsx('div', {
+    className: 'bg-black',
+    children: 'hello world',
+  });
+```
+
+## 类名前缀
+
+你可以通过 Tailwind CSS 提供的 [prefix](https://tailwindcss.com/docs/configuration#prefix) 选项来添加类名前缀，这样可以避免潜在的类名冲突问题（比如 App 和 Module 使用了不同版本的 Tailwind CSS）。
+
+例如，通过 `prefix` 选项添加 `foo-` 前缀：
+
+```js title="tailwind.config.js"
+module.exports = {
+  prefix: 'foo-',
+};
+```
+
+- 源代码：
+
+```tsx title="./src/index.tsx"
+import './index.css';
+
+export default () => {
+  return <div className="foo-bg-black">hello world</div>;
+};
+```
+
+- 产物代码：
+
+```css title="./dist/es/index.css"
+.foo-bg-black {
+  --tw-bg-opacity: 1;
+  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+}
+/** some more... */
+```
+
 ## 用法介绍
 
-Tailwind CSS 提供了两种使用方式：
+下面是一些 Tailwind CSS 的用法示例。
 
 ### HTML 类名
 
-Tailwind CSS 支持在 HTML 标签上使用类名的方式增加样式。**当使用 HTML 类名的时候，一定要注意导入 Tailwind CSS 相应的 css 文件。**
+Tailwind CSS 支持在 HTML 标签上通过类名的方式增加样式。**当使用 HTML 类名的时候，请注意必须要提前导入 Tailwind CSS 相应的 CSS 样式。**
 
 ```tsx title="./src/index.tsx"
-import 'tailwindcss/utilities.css';
+import './index.css';
 
 export default () => {
-  return <div className="bg-black text-white">hello world</div>;
+  return <div className="bg-black">hello world</div>;
 };
 ```
 
 样式产物（此时是 bundle 构建）：
 
 ```css title="./dist/es/index.css"
-/* node_modules/tailwindcss/utilities.css */
-.table {
-  display: table;
-}
 .bg-black {
   --tw-bg-opacity: 1;
   background-color: rgba(0, 0, 0, var(--tw-bg-opacity));
 }
-.text-white {
-  --tw-text-opacity: 1;
-  color: rgba(255, 255, 255, var(--tw-text-opacity));
-}
 /** some more... */
 ```
 
@@ -191,75 +312,7 @@ Tailwind CSS 提供了 [`@apply`](https://v2.tailwindcss.com/docs/functions-and-
 }
 ```
 
-### 推荐方式
-
-**推荐使用 `@apply` 指定的方式开发样式，这样在样式产物中仅包含通过指令内联的样式。**
-
-当使用 HTML 类名的方式添加样式的时候，默认情况下 Tailwind 不仅会将本身类名对应的样式加入产物中，同时还会有额外的样式代码存在，虽然这些代码可能不会对本身的样式产生影响。
-
-### bundle 和 bundleless 构建产物区别
-
-对于以下代码，在 bundle 和 bundleless 两种模式下，构建产物会有很大区别。
-
-> 所谓 bundle 和 bundleless 可以查看 [「Bundle 和 Bundleless」](/guide/advance/in-depth-about-build#bundle-和-bundleless)
-
-```tsx title="./src/index.tsx"
-import 'tailwindcss/utilities.css';
-
-export default () => {
-  return <div className="bg-black text-white">hello world11</div>;
-};
-```
-
-Bundle 模式下，会将第三方依赖打包进来。
-
-对于样式则会生成一份单独的产物文件，并且在 JS 产物文件中并不会存在导入样式的相关代码。
-
-如果需要将样式注入 JS 产物中，可以开启 [`style.inject`](/api/config/build-config#styleinject) 选项。
-
-```css title="./dist/es/index.css"
-/* node_modules/tailwindcss/utilities.css */
-.table {
-  display: table;
-}
-.bg-black {
-  --tw-bg-opacity: 1;
-  background-color: rgba(0, 0, 0, var(--tw-bg-opacity));
-}
-.text-white {
-  --tw-text-opacity: 1;
-  color: rgba(255, 255, 255, var(--tw-text-opacity));
-}
-/** some more... */
-```
-
-```js title="./dist/es/index.js"
-// src/index.tsx
-import { jsx } from 'react/jsx-runtime';
-var src_default = () => {
-  return /* @__PURE__ */ jsx('div', {
-    className: 'bg-black text-white',
-    children: 'hello world11',
-  });
-};
-export { src_default as default };
-```
-
-Bundleless 模式下，并不会将第三方依赖打包进来，此时不会有样式产物生成。
-
-```js title="./dist/es/index.js"
-import { jsx } from 'react/jsx-runtime';
-import 'tailwindcss/utilities.css';
-var src_default = () => {
-  return /* @__PURE__ */ jsx('div', {
-    className: 'bg-black text-white',
-    children: 'hello world11',
-  });
-};
-export { src_default as default };
-```
-
-### 关于 `designSystem` 配置
+## 关于 `designSystem` 配置
 
 `designSystem` 是 Modern.js Module 中废弃的配置项。
 
diff --git a/packages/solutions/app-tools/src/commands/build.ts b/packages/solutions/app-tools/src/commands/build.ts
index 07346b5c7395..c59dc0922cec 100644
--- a/packages/solutions/app-tools/src/commands/build.ts
+++ b/packages/solutions/app-tools/src/commands/build.ts
@@ -53,7 +53,7 @@ export const build = async (
     configFile: serverConfigFile,
   });
 
-  logger.info('Create a production build...\n');
+  logger.info('Starting production build...');
   if (!appContext.builder) {
     throw new Error(
       'Expect the Builder to have been initialized, But the appContext.builder received `undefined`',