docs: optimize Tailwind CSS build performance (#4343)

Author: chenjiahan

website/docs/en/guide/basic/tailwindcss.mdx

@@ -129,7 +129,7 @@ Tailwind CSS provides a [Tailwind CSS IntelliSense](https://github.com/tailwindl
 
 You can install this plugin in VS Code to enable the autocompletion feature.
 
-## Build Performance
+## Optimize Build Performance
 
 When using Tailwind CSS, if the `content` field in `tailwind.config.js` is not correctly configured, this can lead to poor build performance and HMR performance. This is because Tailwind CSS internally matches files based on the glob defined in `content`. The more files it matches, the greater the performance overhead.
 
@@ -148,6 +148,19 @@ module.exports = {
 };
 ```
 
+Sometimes, you may accidentally scan the `node_modules` directory, for example, when scanning files in a monorepo:
+
+```js title="tailwind.config.js"
+module.exports = {
+  content: [
+    './src/**/*.{html,js,ts,jsx,tsx}',
+    // Incorrectly includes the `packages/ui/node_modules` directory
+    // Should be '../../packages/ui/src/**/*.{html,js,ts,jsx,tsx}'
+    '../../packages/ui/**/*.{html,js,ts,jsx,tsx}',
+  ],
+};
+```
+
 ## Optimize CSS Size
 
 If you need to optimize the size of Tailwind CSS styles, you can try [rsbuild-plugin-tailwindcss](https://github.com/rspack-contrib/rsbuild-plugin-tailwindcss).

website/docs/en/guide/optimization/build-performance.mdx

@@ -18,11 +18,17 @@ The following are some general optimization methods, which can speed up the deve
 
 Optimizing the number of modules referenced by the application can reduce the bundle size and improve build performance. Please read the [Bundle Size Optimization](/guide/optimization/optimize-bundle) section to learn some optimization methods.
 
+### Optimize Tailwind CSS
+
+When using Tailwind CSS, if the `content` field in `tailwind.config.js` is not correctly configured, this can lead to poor build performance and HMR performance.
+
+Please refer to [Tailwind CSS - Optimize Build Performance](/guide/basic/tailwindcss#optimize-build-performance) for more details.
+
 ## Development optimization
 
 The following are methods for improving performance in development mode.
 
-## Enable Lazy Compilation
+### Enable Lazy Compilation
 
 Enabling lazy compilation can significantly reduce the number of modules compiled at dev startup and improve startup time.
 

website/docs/zh/guide/basic/tailwindcss.mdx

@@ -129,7 +129,7 @@ Tailwind CSS 提供了 [Tailwind CSS IntelliSense](https://github.com/tailwindla
 
 你可以在 VS Code 中安装该插件，即可开启自动补全功能。
 
-## 构建性能
+## 优化构建性能
 
 在使用 Tailwind CSS 时，如果没有正确地配置 `tailwind.config.js` 中的 `content` 字段，可能会导致构建性能和热更新性能下降。这是因为 Tailwind CSS 内部会基于 `content` 定义的 glob 来匹配文件，扫描的文件数量越多，产生的性能开销越大。
 
@@ -148,6 +148,19 @@ module.exports = {
 };
 ```
 
+有时，你可能会不小心扫描 `node_modules` 目录，例如在 monorepo 中扫描其他包的文件时：
+
+```js title="tailwind.config.js"
+module.exports = {
+  content: [
+    './src/**/*.{html,js,ts,jsx,tsx}',
+    // 错误地包含了 `packages/ui/node_modules` 目录
+    // 正确写法为 '../../packages/ui/src/**/*.{html,js,ts,jsx,tsx}'
+    '../../packages/ui/**/*.{html,js,ts,jsx,tsx}',
+  ],
+};
+```
+
 ## 优化样式体积
 
 如果你需要优化 Tailwind CSS 的样式体积，欢迎尝试 [rsbuild-plugin-tailwindcss](https://github.com/rspack-contrib/rsbuild-plugin-tailwindcss)。

website/docs/zh/guide/optimization/build-performance.mdx

@@ -18,11 +18,17 @@ Rsbuild 默认对构建性能进行了充分优化，但是随着使用场景变
 
 对应用引用的模块数量进行优化，可以减少产物体积并提升构建性能，请阅读 [优化产物体积](/guide/optimization/optimize-bundle) 章节来了解一些优化方法。
 
+### 优化 Tailwind CSS
+
+在使用 Tailwind CSS 时，如果没有正确地配置 `tailwind.config.js` 中的 `content` 字段，可能会导致构建性能和热更新性能下降。
+
+请参考 [Tailwind CSS - 优化构建性能](/guide/basic/tailwindcss#优化构建性能) 了解更多。
+
 ## 开发模式优化
 
 以下是针对开发构建进行提速的方法。
 
-## 启动 Lazy Compilation
+### 开启 Lazy Compilation
 
 启用 lazy compilation 可以显著减少开发启动时编译的模块数量，从而提升启动时间。