From 41dd7e6e06f8db7af142f2c0dfa1a2777754dbb1 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan.jait@bytedance.com>
Date: Thu, 14 Dec 2023 21:47:05 +0800
Subject: [PATCH] docs: prefer use postcss config instead of tools.postcss
 (#953)

---
 .../{postcss.config.js => postcss.config.cjs} |  0
 .../docs/en/guide/basic/tailwindcss.mdx       | 17 ++++++-----------
 .../document/docs/en/guide/basic/unocss.mdx   |  4 +++-
 .../docs/zh/guide/basic/tailwindcss.mdx       | 19 ++++++++-----------
 .../document/docs/zh/guide/basic/unocss.mdx   |  2 +-
 5 files changed, 18 insertions(+), 24 deletions(-)
 rename e2e/cases/css/tailwindcss/{postcss.config.js => postcss.config.cjs} (100%)

diff --git a/e2e/cases/css/tailwindcss/postcss.config.js b/e2e/cases/css/tailwindcss/postcss.config.cjs
similarity index 100%
rename from e2e/cases/css/tailwindcss/postcss.config.js
rename to e2e/cases/css/tailwindcss/postcss.config.cjs
diff --git a/packages/document/docs/en/guide/basic/tailwindcss.mdx b/packages/document/docs/en/guide/basic/tailwindcss.mdx
index 95996536ae..60434cd92f 100644
--- a/packages/document/docs/en/guide/basic/tailwindcss.mdx
+++ b/packages/document/docs/en/guide/basic/tailwindcss.mdx
@@ -14,19 +14,14 @@ import { PackageManagerTabs } from '@theme';
 
 ## Configuring PostCSS
 
-Register the `tailwindcss` plugin through [tools.postcss](/config/tools/postcss).
+You can register the `tailwindcss` PostCSS plugin through [postcss.config.cjs](https://www.npmjs.com/package/postcss-loader#config) or [tools.postcss](/config/tools/postcss).
 
-```ts title="rsbuild.config.ts"
-import { defineConfig } from '@rsbuild/core';
-import tailwindcss from 'tailwindcss';
-
-export default defineConfig({
-  tools: {
-    postcss(config) {
-      config.postcssOptions?.plugins?.push(tailwindcss);
-    },
+```js title="postcss.config.cjs"
+module.exports = {
+  plugins: {
+    tailwindcss: {},
   },
-});
+};
 ```
 
 ## Configuring Tailwind CSS
diff --git a/packages/document/docs/en/guide/basic/unocss.mdx b/packages/document/docs/en/guide/basic/unocss.mdx
index cdd654699a..22beac8f55 100644
--- a/packages/document/docs/en/guide/basic/unocss.mdx
+++ b/packages/document/docs/en/guide/basic/unocss.mdx
@@ -14,7 +14,7 @@ import { PackageManagerTabs } from '@theme';
 
 ## Configuring PostCSS
 
-Register the `unocss` plugin through [tools.postcss](/config/tools/postcss) or [postcss.config.cjs](https://www.npmjs.com/package/postcss-loader#config).
+You can register the `unocss` PostCSS plugin through [postcss.config.cjs](https://www.npmjs.com/package/postcss-loader#config) or [tools.postcss](/config/tools/postcss).
 
 ```js title="postcss.config.cjs"
 module.exports = {
@@ -24,6 +24,8 @@ module.exports = {
 };
 ```
 
+Rsbuild has integrated [autoprefixer](https://github.com/postcss/autoprefixer), so you only need to register the `tailwindcss` plugin.
+
 ## Configuring UnoCSS
 
 Create a `uno.config.ts` file in the root directory of your project and add the following content:
diff --git a/packages/document/docs/zh/guide/basic/tailwindcss.mdx b/packages/document/docs/zh/guide/basic/tailwindcss.mdx
index a6b380d2fd..1704bd49c6 100644
--- a/packages/document/docs/zh/guide/basic/tailwindcss.mdx
+++ b/packages/document/docs/zh/guide/basic/tailwindcss.mdx
@@ -14,21 +14,18 @@ import { PackageManagerTabs } from '@theme';
 
 ## 配置 PostCSS
 
-通过 [tools.postcss](/config/tools/postcss) 来注册 `tailwindcss` 插件。
+你可以通过 [postcss.config.cjs](https://www.npmjs.com/package/postcss-loader#config) 或 [tools.postcss](/config/tools/postcss) 来注册 `tailwindcss` 的 PostCSS 插件。
 
-```ts title="rsbuild.config.ts"
-import { defineConfig } from '@rsbuild/core';
-import tailwindcss from 'tailwindcss';
-
-export default defineConfig({
-  tools: {
-    postcss(config) {
-      config.postcssOptions?.plugins?.push(tailwindcss);
-    },
+```js title="postcss.config.cjs"
+module.exports = {
+  plugins: {
+    tailwindcss: {},
   },
-});
+};
 ```
 
+Rsbuild 已经内置了 [autoprefixer](https://github.com/postcss/autoprefixer)，因此你只需要注册 `tailwindcss` 插件即可。
+
 ## 配置 Tailwind CSS
 
 在当前项目的根目录创建 `tailwind.config.js` 文件，并添加以下内容：
diff --git a/packages/document/docs/zh/guide/basic/unocss.mdx b/packages/document/docs/zh/guide/basic/unocss.mdx
index c477c7fc80..5bca49b48a 100644
--- a/packages/document/docs/zh/guide/basic/unocss.mdx
+++ b/packages/document/docs/zh/guide/basic/unocss.mdx
@@ -14,7 +14,7 @@ import { PackageManagerTabs } from '@theme';
 
 ## 配置 PostCSS
 
-你可以通过 [tools.postcss](/config/tools/postcss) 或 [postcss.config.cjs](https://www.npmjs.com/package/postcss-loader#config) 来注册 `unocss` 插件。
+你可以通过 [postcss.config.cjs](https://www.npmjs.com/package/postcss-loader#config) 或 [tools.postcss](/config/tools/postcss) 来注册 `unocss` 的 PostCSS 插件。
 
 ```js title="postcss.config.cjs"
 module.exports = {