@modern-js/module-tools-docs 2.32.1 → 2.33.0

package/docs/zh/guide/advance/in-depth-about-build.md

@@ -10,62 +10,41 @@ sidebar_position: 1
 如果你还不了解 `buildConfig` 的作用，请先阅读 [修改输出产物](/guide/basic/modify-output-product)。
 :::
 
-而在本章里我们将要深入理解某些构建配置的使用以及了解执行 `modern build` 命令的时候发生了什么。
+而在本章里我们将要深入理解某些构建配置的作用以及了解执行 `modern build` 命令的时候发生了什么。
 
-## 深入理解 `buildConfig`
+## buildConfig
 
-### Bundle 和 Bundleless
+### `bundle` / `bundleless`
 
-那么首先我们来了解一下 Bundle 和 Bundleless。
+那么首先我们来了解一下 bundle 和 bundleless。
 
-所谓 Bundle 是指对构建产物进行打包，构建产物可能是一个文件，也有可能是基于一定的[代码拆分策略](https://esbuild.github.io/api/#splitting)得到的多个文件。
+所谓 bundle 是指对构建产物进行打包，构建产物可能是一个文件，也有可能是基于一定的[代码拆分策略](https://esbuild.github.io/api/#splitting)得到的多个文件。
 
-而 Bundleless 则是指对每个源文件单独进行编译构建，但是并不将它们打包在一起。每一个产物文件都可以找到与之相对应的源码文件。**Bundleless 构建的过程，也可以理解为仅对源文件进行代码转换的过程**。
+而 bundleless 则是指对每个源文件单独进行编译构建，但是并不将它们打包在一起。每一个产物文件都可以找到与之相对应的源码文件。**bundleless 构建的过程，也可以理解为仅对源文件进行代码转换的过程**。
 
 它们有各自的好处：
 
-- Bundle 可以减少构建产物的体积，也可以对依赖预打包，减小安装依赖的体积。提前对库进行打包，可以加快应用项目构建的速度。
-- Bundleless 则是可以保持原有的文件结构，更有利于调试和 tree shaking。
+- bundle 可以减少构建产物的体积，也可以对依赖预打包，减小安装依赖的体积。提前对库进行打包，可以加快应用项目构建的速度。
+- bundleless 则是可以保持原有的文件结构，更有利于调试和 tree shaking。
 
 :::warning
-Bundleless 是单文件编译模式，因此对于类型的引用和导出你需要加上 `type` 字段， 例如 `import type { A } from './types`
+bundleless 是单文件编译模式，因此对于类型的引用和导出你需要加上 `type` 字段， 例如 `import type { A } from './types`
 :::
 
-在 `buildConfig` 中可以通过 [`buildConfig.buildType`](/api/config/build-config#buildtype) 来指定当前构建任务是 Bundle 还是 Bundleless。
+在 `buildConfig` 中可以通过 [`buildConfig.buildType`](/api/config/build-config#buildtype) 来指定当前构建任务是 bundle 还是 bundleless。
 
-### `input` 与 `sourceDir` 的关系
+### `input` / `sourceDir`
 
-[`buildConfig.input`](/api/config/build-config#input) 用于指定读取源码的文件路径或者目录路径，其默认值在 Bundle 和 Bundleless 构建过程中有所不同：
+[`buildConfig.input`](/api/config/build-config#input) 用于指定读取源码的文件路径或者目录路径，其默认值在 bundle 和 bundleless 构建过程中有所不同：
 
 - 当 `buildType: 'bundle'` 的时候，`input` 默认值为 `src/index.(j|t)sx?`
 - 当 `buildType: 'bundleless'` 的时候，`input` 默认值为 `['src']`
 
 :::warning
-建议不要在 Bundleless 构建过程中指定多个源码文件目录，这可能会导致产物里的相对路径不正确。
+建议不要在 bundleless 构建过程中指定多个源码文件目录，这可能会导致产物里的相对路径不正确。
 :::
 
-从默认值上我们可以知道：**Bundle 构建一般可以指定文件路径作为构建的入口，而 Bundleless 构建则更期望使用目录路径寻找源文件**。
-
-#### `input` 的对象模式
-
-在 Bundle 构建过程中，除了将 `input` 设置为一个数组，也可以将它设置为一个对象。**通过使用对象的形式，我们可以修改构建产物输出的文件名称**。那么对于下面的例子，`./src/index.ts` 对应的构建产物文件路径为 `./dist/main.js`。
-
-```js title="modern.config.ts"
-import { defineConfig } from '@modern-js/module-tools';
-
-export default defineConfig({
-  buildConfig: {
-    input: {
-      main: ['./src/index.ts'],
-    },
-    outDir: './dist',
-  },
-});
-```
-
-而在 Bundleless 构建过程中，虽然同样支持这样的使用方式，但是并不推荐。
-
-#### `sourceDir`
+从默认值上我们可以知道：**bundle 构建一般可以指定文件路径作为构建的入口，而 bundleless 构建则更期望使用目录路径寻找源文件**。
 
 [`sourceDir`](/api/config/build-config#sourcedir) 用于指定源码目录，它主要与以下两个内容有关系：
 
@@ -74,10 +53,10 @@ export default defineConfig({
 
 一般来说：
 
-- **在 Bundleless 构建过程中，`sourceDir` 与 `input` 的值要保持一致，它们的默认值都是 `src`**。
-- 在 Bundle 构建过程中，无需使用 `sourceDir`。
+- **在 bundleless 构建过程中，`sourceDir` 与 `input` 的值要保持一致，它们的默认值都是 `src`**。
+- 在 bundle 构建过程中，无需使用 `sourceDir`。
 
-### 类型文件
+### dts
 
 [`buildConfig.dts`](/api/config/build-config#dts) 配置主要用于类型文件的生成。
 
@@ -110,7 +89,7 @@ export default defineConfig({
 
 #### 别名转换
 
-在 Bundleless 构建过程中，如果源代码中出现了别名，例如：
+在 bundleless 构建过程中，如果源代码中出现了别名，例如：
 
 ```js title="./src/index.ts"
 import utils from '@common/utils';
@@ -121,19 +100,16 @@ import utils from '@common/utils';
 - 对于类似 `import '@common/utils'` 或者 `import utils from '@common/utils'` 这样形式的代码可以进行别名转换。
 - 对于类似 `export { utils } from '@common/utils'` 这样形式的代码可以进行别名转换。
 
-然而也存在一些情况，目前还无法处理：
-
-- 对于类似 `Promise<import('@common/utils')>` 这样形式的输出类型目前无法进行转换。
+然而也存在一些情况，目前还无法处理，例如 `Promise<import('@common/utils')>` 这样形式的输出类型目前无法进行转换。
+对于这种情况的解决办法，可以参与[讨论](https://github.com/web-infra-dev/modern.js/discussions/4511)。
 
-#### 一些 `dts` 的使用示例
-
-一般使用方式：
+#### 一些示例
 
 ```js
 import { defineConfig } from '@modern-js/module-tools';
 
 export default defineConfig({
-  // 此时打包的类型文件输出路径为 `./dist/types`
+  // 此时打包的类型文件输出路径为 `./dist/types`，并且将会读取项目下的 other-tsconfig.json 文件
   buildConfig: {
     buildType: 'bundle',
     dts: {
@@ -145,8 +121,6 @@ export default defineConfig({
 });
 ```
 
-使用 `dts.only` 的情况：
-
 ```js
 import { defineConfig } from '@modern-js/module-tools';
 
@@ -169,7 +143,7 @@ export default defineConfig({
 });
 ```
 
-### `buildConfig.define` 不同场景的使用方式
+### `define`
 
 [`buildConfig.define`](/api/config/build-config#define) 功能有些类似 [`webpack.DefinePlugin`](https://webpack.js.org/plugins/define-plugin/)。这里介绍几个使用场景：
 
@@ -240,9 +214,9 @@ declare const YOUR_ADD_GLOBAL_VAR;
 当执行 `modern build` 命令的时候，会发生
 
 - 根据 `buildConfig.outDir` 清理产物目录。
-- 编译 `js/ts` 源代码生成 Bundle/Bundleless 的 JS 构建产物。
-- 使用 `tsc` 生成 Bundle/Bundleless 的类型文件。
-- 处理 Copy 任务。
+- 编译 `js/ts` 源代码生成 bundle / bundleless 的 JS 构建产物。
+- 使用 `tsc` 生成 bundle / bundleless 的类型文件。
+- 处理 `copy` 任务。
 
 ## 构建报错
 
@@ -272,7 +246,7 @@ bundle DTS failed:
 
 对于 `js/ts` 构建错误，我们可以从报错信息中知道：
 
-- 通过 `'bundle failed:'` 来判断报错的是 Bundle 构建还是 Bundleless 构建？
-- 构建过程的 `format` 是什么？
-- 构建过程的 `target` 是什么？
-- 具体的报错信息。
+- 报错的 `buildType`
+- 报错的 `format`
+- 报错的 `target`
+- 其他具体报错信息

package/docs/zh/guide/basic/before-getting-started.md

@@ -90,7 +90,7 @@ npm Registry 是一个 [npm 包存储的地方](https://docs.npmjs.com/about-the
 
 > 想要了解关于 webpack 如何做这件事，可以查看这个[链接](https://webpack.js.org/configuration/resolve/#resolvemainfields)。
 
-### `"scripts"`
+### "scripts"
 
 `package.json` 文件的 `"scripts"` 属性支持一些内置的脚本和 npm 预设的生命周期事件，以及任意的脚本。
 

package/docs/zh/guide/basic/modify-output-product.md

@@ -8,7 +8,7 @@ sidebar_position: 3
 
 当你在初始化的项目里使用 `modern build` 命令的时候，Module Tools 会根据当前配置内容，生成相应的构建产物。
 
-默认的配置内容如下：
+模板创建的默认配置内容如下：
 
 ```ts title="modern.config.ts"
 import { moduleTools, defineConfig } from '@modern-js/module-tools';
@@ -39,58 +39,17 @@ export default defineConfig({
 
 `buildPreset` 代表着提前准备好的一组或者多组构建相关的配置，只需要使用 `buildPreset` 对应的预设值，就可以省去麻烦且复杂的配置工作，得到符合预期的产物。
 
-### 构建预设的字符串形式
+Module Tools 主要内置了两套构建预设,包括:
 
-**构建预设的值可以是字符串形式**，因此这样形式的构建预设叫做预设字符串。
+- `npm-component`: 用于构建组件库。
+- `npm-library`: 用于打包其他库类型的项目,如工具库。
 
-模块工程解决方案根据 npm 包使用的通用场景，提供了通用的构建预设字符串以及相应的变体。目前支持的所有预设字符串可以通过 [BuildPreset API](/api/config/build-preset) 查看。这里讲解一下关于**通用的预设字符串与变体之间的关系**。
+同时，还提供一些变体，例如 `npm-library-with-umd` 和 `npm-library-es5`，顾名思义，分别对应带有 umd 产物和支持到 es5 语法的库预设。
+详细配置可以查看其[API](/api/config/build-preset)。
 
-在通用的预设字符串中，`"npm-library"` 可以用于在开发库类型的 npm 包的场景下使用，它适合大多数普通的模块类型项目。当设置 `"npm-library"` 的时候，项目的输出产物会有以下特点：
+除此之外,我们也可以完全自定义构建配置:
 
-- 在 `dist/lib` 目录下会得到代码格式为 `cjs`、语法支持到 `es6` 且经过打包处理后的产物。
-- 在 `dist/es` 目录下会得到代码格式为 `esm`、语法支持为 `es6` 且经过打包处理后的产物。
-- 在 `dist/types` 目录下会得到类型文件。如果不是 TypeScript 项目，则没有该目录。
-
-而预设字符串 `"npm-library"` 对应的变体则是在原本产物的基础上修改了**代码语法支持**这一特点，同时在字符串命名上也变为了 `"npm-library-[es5 | es2016...es2020 | esnext]"` 这样的形式。
-
-例如，如果在预设字符串 `"npm-library"` 对应的输出产物基础上，让产物代码支持的语法变为 `es5` 的话，那么只需要将 `"npm-library"` 改变为 `"npm-library-es5"` 就可以了。
-
-### 构建预设的函数形式
-
-**除了字符串形式以外，构建预设的值也可以是函数形式，在函数中可以打印或者修改某个预设值对应的具体配置**。
-
-例如，如果使用预设函数的形式达到预设字符串 `"npm-library-es5"` 同样的效果，可以按照如下的方式：
-
-```ts title="modern.config.ts"
-import { moduleTools, defineConfig } from '@modern-js/module-tools';
-
-export default defineConfig({
-  plugins: [moduleTools()],
-  buildPreset({ preset }) {
-    return preset.NPM_LIBRARY.map(config => {
-      return { ...config, target: 'es5' };
-    });
-  },
-});
-```
-
-在上面的代码实现中，`preset.NPM_LIBRARY` 与预设字符串 `"npm-library"` 是相对应的，它代表与 `"npm-library"` 等价的多个构建相关的配置。
-
-我们通过 `map` 方法遍历了 `NPM_LIBRARY` 这个数组，在这个数组中包含了多个 `buildConfig` 对象。我们将原本的 `buildConfig` 对象进行了浅拷贝，并修改了浅拷贝后 `target` 的值，将它指定为 `es5`。
-
-如果你想了解 `preset.NPM_LIBRARY` 具体包含的内容，可以通过 [BuildPreset API](/api/config/build-preset) 查看。
-
-此外，在 `preset` 对象下，不仅包含了 `NPM_LIBRARY`，也包含了其他类似的常量。
-
-:::tip
-我们不仅可以使用 `preset.NPM_LIBRARY` 来获取 `"npm-library"` 对应的构建配置，也可以使用 `preset['npm-library']` 这样的方式。
-:::
-
-那么这里的 `buildConfig` 对象是什么呢？之前提到的构建产物特点又是根据什么呢？
-
-接下来我们解释一下。
-
-## 构建配置（对象）
+## 构建配置
 
 **`buildConfig` 是一个用来描述如何编译、生成构建产物的配置项**。在最开始提到的关于“_构建产物的特点_”，其实都是 `buildConfig` 所支持的属性。目前所支持的属性覆盖了大部分模块类型项目在构建产物时的需求，`buildConfig` 不仅包含一些产物所具备的属性，也包含了构建产物所需要的一些特性功能。接下来从分类的角度简单罗列一下：
 
@@ -127,36 +86,54 @@ export default defineConfig({
 
 除了以上分类以外，关于这些 API 的常见问题和最佳实践可以通过下面的链接来了解：
 
-- [什么是 `bundle` 和 `bundleless`?](/guide/advance/in-depth-about-build#bundle-和-bundleless)
-- [`input` 与 `sourceDir` 的关系](/guide/advance/in-depth-about-build#input-与-sourcedir-的关系)。
-- [产物中类型文件的多种生成方式](/guide/advance/in-depth-about-build#类型文件)。
-- [`buildConfig.define` 不同场景的使用方式。](/guide/advance/in-depth-about-build#buildconfigdefine-不同场景的使用方式)
-- [如何处理第三方依赖？](/guide/advance/external-dependency)
-- [如何使用拷贝？](/guide/advance/copy)
-- [如何构建 umd 产物？](/guide/advance/build-umd#设置项目的全局变量名称)
-- [静态资源目前所支持的能力。](/guide/advance/asset)
+- [关于 `bundle` 和 `bundleless`](/guide/advance/in-depth-about-build#bundle--bundleless)
+- [关于 `input` 和 `sourceDir`](/guide/advance/in-depth-about-build#input--sourcedir)。
+- [关于类型描述文件](/guide/advance/in-depth-about-build#dts)。
+- [如何使用 define](/guide/advance/in-depth-about-build#define)
+- [如何处理第三方依赖](/guide/advance/external-dependency)
+- [如何使用拷贝](/guide/advance/copy)
+- [如何构建 umd 产物](/guide/advance/build-umd)
+- [如何使用静态资源](/guide/advance/asset)
+
+## 结合配置与预设
+
+了解 `buildPreset` 和 `buildConfig` 之后，我们可以将二者进行结合使用。
 
-## 什么时候使用 `buildConfig`
+在实际项目中,我们可以先使用 `buildPreset` 来快速获取一套默认构建配置。如果需要自定义,可以使用 `buildConfig` 进行覆盖和扩展。
 
-`buildConfig` 是用于修改产物的方式之一，**当与 `buildPreset` 配置同时存在的时候，只有 `buildConfig` 才会生效**。因此如果按照如下方式配置：
+扩展的逻辑如下:
+
+- 当 `buildConfig` 是数组时，会在原来的预设基础上添加新的配置项。
 
 ```ts title="modern.config.ts"
-import { defineConfig } from '@modern-js/module-tools';
+import { moduleTools, defineConfig } from '@modern-js/module-tools';
 
 export default defineConfig({
-  buildConfig: {
-    format: 'umd',
-  },
+  plugins: [moduleTools()],
   buildPreset: 'npm-library',
+  buildConfig: [
+    {
+      format: 'iife',
+      target: 'es2020',
+      outDir: './dist/global'
+    }
+  ]
 });
 ```
 
-那么此时就会看到如下提示：
+这会在原本预设的基础上，额外生成一份 IIFE 格式、支持到 ES2020 语法的产物，输出目录为项目下的 `dist/global` 目录。
 
-```bash
-因为同时出现 'buildConfig' 和 'buildPreset' 配置，因此仅 'buildConfig' 配置生效
-```
+- 当 `buildConfig` 是对象时,会将对象中的配置项覆盖到预设中。
 
-`buildPreset` 代表的一组或者多组构建相关的配置都是由 `buildConfig` 组成，**当使用 `buildPreset` 无法满足当前项目需求的时候，就可以使用 `buildConfig` 来自定义输出产物**。
+```ts title="modern.config.ts"
+import { moduleTools, defineConfig } from '@modern-js/module-tools';
+export default defineConfig({
+  plugins: [moduleTools()],
+  buildPreset: 'npm-library',
+  buildConfig: {
+    sourceMap: true,
+  }
+});
+```
 
-在使用 `buildConfig` 的过程，就是对**获得怎样的构建产物**的思考过程。
+这会使得每一项构建任务都会生成 sourceMap 文件。

package/docs/zh/guide/basic/use-micro-generator.md

@@ -7,7 +7,7 @@ sidebar_position: 4
 模块工程解决方案提供了微生成器工具，它可以为当前项目：
 
 - 新增目录和文件
-- 修改 `package.json` 文件内容
+- 修改 `package.json`
 - 执行命令
 
 因此通过这些能力，**微生成器可以为项目开启额外的特性功能**。
@@ -20,17 +20,16 @@ sidebar_position: 4
 
 :::tip
 在成功开启后，会提示需要手动在配置中增加如下类似的代码。
+
 ```ts
 import { moduleTools, defineConfig } from '@modern-js/module-tools';
 import { testingPlugin } from '@modern-js/plugin-testing';
 
 export default defineConfig({
-  plugins: [
-    moduleTools(),
-    testingPlugin(),
-  ],
+  plugins: [moduleTools(), testingPlugin()],
 });
 ```
+
 :::
 
 ## Storybook 调试
@@ -39,17 +38,16 @@ export default defineConfig({
 
 :::tip
 在成功开启后，会提示需要手动在配置中增加如下类似的代码。
+
 ```ts
 import { moduleTools, defineConfig } from '@modern-js/module-tools';
 import { storybookPlugin } from '@modern-js/plugin-storybook';
 
 export default defineConfig({
-  plugins: [
-    moduleTools(),
-    storybookPlugin(),
-  ],
+  plugins: [moduleTools(), storybookPlugin()],
 });
 ```
+
 :::
 
 关于如何启动 Storybook 以及如何使用 Storybook，可以查看下面的链接：
@@ -59,28 +57,11 @@ export default defineConfig({
 
 ## Tailwind CSS 支持
 
-当我们想要为项目增加 [Tailwind CSS](https://v2.tailwindcss.com/) 支持的时候，可以启动这个功能。Tailwind CSS 是一个 CSS 库，提供开箱即用的样式。
-
-关于如何在模块工程里使用 Tailwind CSS，可以查看：
+[Tailwind CSS](https://tailwindcss.com/) 是一个以 Utility Class 为基础的 CSS 框架和设计系统，可以快速地为组件添加常用样式，同时支持主题样式的灵活扩展。
 
-- [使用 Tailwind CSS](https://modernjs.dev/module-tools/guide/best-practices/components.html#tailwind-css)
+如果你想要在项目使用 [Tailwind CSS](https://tailwindcss.com/)，可以参考 [「使用 Tailwind CSS」](https://modernjs.dev/module-tools/guide/best-practices/components.html#tailwind-css)。
 
-:::tip
-在成功开启后，会提示需要手动在配置中增加如下类似的代码。
-```ts
-import { moduleTools, defineConfig } from '@modern-js/module-tools';
-import { tailwindcssPlugin } from '@modern-js/plugin-tailwindcss';
-
-export default defineConfig({
-  plugins: [
-    moduleTools(),
-    tailwindPlugin(),
-  ],
-});
-```
-:::
-
-## 启动 Modern.js Runtime API
+## Modern.js Runtime API 支持
 
 **Modern.js 提供了 [Runtime API](https://modernjs.dev/configure/app/runtime/intro) 能力，这些 API 只能在 Modern.js 的应用项目环境中使用**。如果你需要开发一个 Modern.js 应用环境中使用的组件，那么你可以开启该特性，微生成器会增加 `"@modern-js/runtime"`依赖。
 
@@ -88,15 +69,14 @@ export default defineConfig({
 
 :::tip
 在成功开启后，会提示需要手动在配置中增加如下类似的代码。
+
 ```ts
 import { moduleTools, defineConfig } from '@modern-js/module-tools';
 import runtime from '@modern-js/runtime/cli';
 
 export default defineConfig({
-  plugins: [
-    moduleTools(),
-    runtime(),
-  ],
+  plugins: [moduleTools(), runtime()],
 });
 ```
+
 :::

package/docs/zh/guide/basic/using-storybook.mdx

@@ -62,9 +62,7 @@ export const content = 'hello world';
       "foo/*": ["./*"]
     }
   },
-  "include": [
-    "**/*"
-  ]
+  "include": ["**/*"]
 }
 ```
 
@@ -136,7 +134,6 @@ export default {
 };
 ```
 
-
 :::tip 为什么不推荐使用源码的方式?
 不仅仅是因为使用组件源码无法验证组件产物是否正确，**同时模块工程对于构建产物支持的一些配置无法完全转换为 Storybook
 内部的配置**。如果某些配置无法进行相互转换的话，就会在 Storybook 调试过程中出现不符合预期的结果。
@@ -159,7 +156,6 @@ Storybook 官方通过一个名为 `.storybook` 的文件夹来进行项目配
 
 在未来我们会考虑这些配置是否可以允许修改，不过目前为了减少不可预知的问题暂时限制使用这些配置。
 
-
 ## 构建 Storybook 产物
 
 除了可以对组件或者普通的模块进行 Storybook 调试，还可以通过下面的命令来执行 Storybook 的构建任务。
@@ -173,3 +169,18 @@ modern build --platform storybook
 - [`modern build`](/guide/basic/command-preview#modern-build)
 
 构建完成后，可以在 `dist/storybook-static` 目录看到构建产物文件。
+
+## 结合 Tailwind CSS 使用
+
+如果你需要在 `stories` 目录下使用 Tailwind CSS，请确保当前项目的 Tailwind CSS 配置中包含了 `stories` 目录。
+
+以 `tailwind.config.ts` 文件为例，你需要配置以下内容：
+
+```diff title="tailwind.config.ts"
+export default {
+  content: [
+    './src/**/*.{js,jsx,ts,tsx}',
++   './stories/**/*.{js,jsx,ts,tsx}',
+  ],
+};
+```

package/docs/zh/guide/best-practices/components.mdx

@@ -168,202 +168,7 @@ body {
 
 ### Tailwind CSS
 
-模块工程支持使用 Tailwind CSS 开发组件样式。
-
-默认情况下，模块工程没有开启该功能，需要按照下面的方式开启它。
-
-1. 在项目根目录下执行 `new` 命令，可以开启 Tailwind CSS 功能。
-
-```text title="终端"
-pnpm run new
-
-? 请选择你想要的操作 启用可选功能
-? 请选择功能名称 启用 「Tailwind CSS」 支持
-```
-
-2. 成功开启后，会看到 `package.json` 中新增了依赖。
-
-```json title="./package.json"
-{
-  "devDependencies": {
-    "@modern-js/plugin-tailwindcss": "x.y.z"
-  }
-}
-```
-
-3. Tailwind CSS 提供了两种使用方式：
-
-#### HTML 类名
-
-Tailwind CSS 支持在 HTML 标签上使用类名的方式增加样式。**当使用 HTML 类名的时候，一定要注意导入 Tailwind CSS 相应的 css 文件。**
-
-```tsx title="./src/index.tsx"
-import 'tailwindcss/utilities.css';
-
-export default () => {
-  return <div className="bg-black text-white">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... */
-```
-
-#### `@apply`
-
-Tailwind CSS 提供了 [`@apply`](https://v2.tailwindcss.com/docs/functions-and-directives#apply) 指令，可以通过它将 Tailwind CSS 提供的样式内联到我们编写的样式中。
-
-`@apply` 可以用于 CSS、Less、Sass 中。
-
-```css
-.btn {
-  @apply font-bold py-2 px-4 rounded;
-}
-```
-
-但是使用过程中，对于 Less 和 Sass 有些情况需要注意：
-
-##### Sass
-
-当将 Tailwind 与 Sass 一起使用时，`@apply` 后面存在 `!important` 的时候，需要使用插值来让 Sass 正确编译。
-
-- 不能正常工作：
-
-```sass
-.alert {
-  @apply bg-red-500 !important;
-}
-```
-
-- 能够正常工作：
-
-```sass
-.alert {
-  @apply bg-red-500 #{!important};
-}
-```
-
-##### Less
-
-在与 Less 一起使用 Tailwind 时，你不能嵌套 Tailwind 的 `@screen` 指令。
-
-- 不能正常工作：
-
-```less
-.card {
-  @apply rounded-none;
-
-  @screen sm {
-    @apply rounded-lg;
-  }
-}
-```
-
-- 相反，使用常规的媒体查询和 `theme()` 函数来引用你的屏幕尺寸，或者干脆不要嵌套你的 `@screen` 指令。
-
-```less title="方法一"
-// Use a regular media query and theme()
-.card {
-  @apply rounded-none;
-
-  @media (min-width: theme('screens.sm')) {
-    @apply rounded-lg;
-  }
-}
-```
-
-```less title="方法二"
-// Use the @screen directive at the top-level
-.card {
-  @apply rounded-none;
-
-  @media (min-width: theme('screens.sm')) {
-    @apply rounded-lg;
-  }
-}
-```
-
-#### 推荐方式
-
-**推荐使用 `@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 };
-```
+请参考 [「使用 Tailwind CSS」](/guide/best-practices/use-tailwindcss.html) 来了解相关用法。
 
 ### CSS Modules