diff --git a/website/docs/en/guide/styling/unocss.mdx b/website/docs/en/guide/styling/unocss.mdx
index 3b480cd4dc..9f16000c24 100644
--- a/website/docs/en/guide/styling/unocss.mdx
+++ b/website/docs/en/guide/styling/unocss.mdx
@@ -2,57 +2,42 @@
 
 [UnoCSS](https://unocss.dev/) is the instant atomic CSS engine, that is designed to be flexible and extensible. The core is un-opinionated, and all the CSS utilities are provided via presets.
 
-You can integrate UnoCSS in Rsbuild via [@unocss/webpack](https://npmjs.com/package/@unocss/webpack).
+You can integrate UnoCSS in Rsbuild via PostCSS plugins.
 
 ## Installing UnoCSS
 
-You need to install `@unocss/webpack` first.
+You need to install `unocss` and `@unocss/postcss` first.
 
 import { PackageManagerTabs } from '@theme';
 
-<PackageManagerTabs command="add @unocss/webpack -D" />
+<PackageManagerTabs command="add unocss @unocss/postcss -D" />
 
-## Configuring plugin
+## Configuring PostCSS
 
-Register the `UnoCSSRspackPlugin` plugin in [tools.rspack](/config/tools/rspack):
+You can register the `unocss` PostCSS plugin through [postcss.config.mjs](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 { UnoCSSRspackPlugin } from '@unocss/webpack/rspack';
+```js title="postcss.config.mjs"
+import UnoCSS from '@unocss/postcss';
 
-export default defineConfig({
-  tools: {
-    rspack: {
-      plugins: [
-        UnoCSSRspackPlugin({
-          // options
-        }),
-      ],
-    },
-  },
-});
+export default {
+  plugins: [UnoCSS()],
+};
 ```
 
-You can add UnoCSS Presets via the options of `UnoCSSRspackPlugin`, for example:
+Rsbuild has integrated [autoprefixer](https://github.com/postcss/autoprefixer), so you only need to register the `UnoCSS` plugin.
 
-```ts title="rsbuild.config.ts"
-import { defineConfig } from '@rsbuild/core';
-import { pluginReact } from '@rsbuild/plugin-react';
-import { UnoCSSRspackPlugin } from '@unocss/webpack/rspack';
-import { presetAttributify } from '@unocss/preset-attributify';
-import { presetUno } from '@unocss/preset-uno';
+## Configuring UnoCSS
+
+Create a `uno.config.ts` file in the root directory of your project and add the following content:
+
+```js title="uno.config.ts"
+import { defineConfig, presetUno } from 'unocss';
 
 export default defineConfig({
-  plugins: [pluginReact()],
-  tools: {
-    rspack: {
-      plugins: [
-        UnoCSSRspackPlugin({
-          presets: [presetUno(), presetAttributify()],
-        }),
-      ],
-    },
+  content: {
+    filesystem: ['./src/**/*.{html,js,ts,jsx,tsx}'],
   },
+  presets: [presetUno()],
 });
 ```
 
@@ -62,12 +47,15 @@ The above configuration is for reference only and can be modified to suit the ne
 
 ## Importing CSS
 
-In the JavaScript entry file, import `uno.css`:
+Add the `@unocss` directives in your CSS entry file:
 
-```js title="main.js"
-import 'uno.css';
+```css title="main.css"
+@unocss preflights;
+@unocss default;
 ```
 
+Depending on your needs, you can selectively import the CSS styles provided by UnoCSS. Please refer to the [unocss documentation](https://unocss.dev/integrations/postcss#usage) for detailed usage of the UnoCSS.
+
 ## Done
 
 You have now completed all the steps to integrate UnoCSS in Rsbuild!
diff --git a/website/docs/zh/guide/styling/unocss.mdx b/website/docs/zh/guide/styling/unocss.mdx
index 84da662994..408ca31314 100644
--- a/website/docs/zh/guide/styling/unocss.mdx
+++ b/website/docs/zh/guide/styling/unocss.mdx
@@ -2,57 +2,40 @@
 
 [UnoCSS](https://unocss.dev/) 是一个灵活可扩展的原子化的 CSS 引擎，所有 CSS 工具类都是通过 preset 提供的。
 
-你可以通过 [@unocss/webpack](https://npmjs.com/package/@unocss/webpack) 插件来在 Rsbuild 中接入 UnoCSS。
+你可以通过 PostCSS 插件来在 Rsbuild 中接入 UnoCSS。
 
 ## 安装 UnoCSS
 
-首先，你需要安装 `@unocss/webpack`。
+首先，你需要安装 `unocss` 和 `@unocss/postcss`。
 
 import { PackageManagerTabs } from '@theme';
 
-<PackageManagerTabs command="add @unocss/webpack -D" />
+<PackageManagerTabs command="add unocss @unocss/postcss -D" />
 
-## 配置插件
+## 配置 PostCSS
 
-在 [tools.rspack](/config/tools/rspack) 中注册 UnoCSS 的插件：
+你可以通过 [postcss.config.mjs](https://www.npmjs.com/package/postcss-loader#config) 或 [tools.postcss](/config/tools/postcss) 来注册 `unocss` 的 PostCSS 插件。
 
-```ts title="rsbuild.config.ts"
-import { defineConfig } from '@rsbuild/core';
-import { UnoCSSRspackPlugin } from '@unocss/webpack/rspack';
+```js title="postcss.config.mjs"
+import UnoCSS from '@unocss/postcss';
 
-export default defineConfig({
-  tools: {
-    rspack: {
-      plugins: [
-        UnoCSSRspackPlugin({
-          // options
-        }),
-      ],
-    },
-  },
-});
+export default {
+  plugins: [UnoCSS()],
+};
 ```
 
-通过 `UnoCSSRspackPlugin` 的选项可以添加 UnoCSS 的 Presets，例如：
+## 配置 UnoCSS
 
-```ts title="rsbuild.config.ts"
-import { defineConfig } from '@rsbuild/core';
-import { pluginReact } from '@rsbuild/plugin-react';
-import { UnoCSSRspackPlugin } from '@unocss/webpack/rspack';
-import { presetAttributify } from '@unocss/preset-attributify';
-import { presetUno } from '@unocss/preset-uno';
+在当前项目的根目录创建 `uno.config.ts` 文件，并添加以下内容：
+
+```js title="uno.config.ts"
+import { defineConfig, presetUno } from 'unocss';
 
 export default defineConfig({
-  plugins: [pluginReact()],
-  tools: {
-    rspack: {
-      plugins: [
-        UnoCSSRspackPlugin({
-          presets: [presetUno(), presetAttributify()],
-        }),
-      ],
-    },
+  content: {
+    filesystem: ['./src/**/*.{html,js,ts,jsx,tsx}'],
   },
+  presets: [presetUno()],
 });
 ```
 
@@ -62,12 +45,15 @@ export default defineConfig({
 
 ## 引入 CSS
 
-在 JavaScript 入口文件中引用 `uno.css`：
+在 CSS 入口文件中添加 `@unocss` 指令：
 
-```js title="main.js"
-import 'uno.css';
+```css title="main.css"
+@unocss preflights;
+@unocss default;
 ```
 
+根据需求不同，你可以选择性地导入 UnoCSS 提供的 CSS 样式。请参考 [UnoCSS 文档](https://unocss.dev/integrations/postcss#usage) 来了解 `@unocss` 指令的详细用法。
+
 ## 完成
 
 你已经完成了在 Rsbuild 中接入 UnoCSS 的全部步骤！