docs: prefer use postcss config instead of tools.postcss (#953)

web-infra-dev · Dec 14, 2023 · 41dd7e6 · 41dd7e6
1 parent a93e66a
commit 41dd7e6
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 24 deletions.
diff --git a/e2e/cases/css/tailwindcss/postcss.config.js → e2e/cases/css/tailwindcss/postcss.config.cjs b/e2e/cases/css/tailwindcss/postcss.config.js → 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
@@ -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
@@ -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
@@ -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
@@ -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 = {