From abf60082f174ff09b0bf7535c1f30ea70a8fb7ae Mon Sep 17 00:00:00 2001
From: gao-pw <1152910080@qq.com>
Date: Wed, 14 May 2025 17:53:44 +0800
Subject: [PATCH] docs(v1-tailwind4): update v1 how to use tailwind 4
---
packages/document/docs/en/guide/basic/custom-page.mdx | 8 +++-----
packages/document/docs/zh/guide/basic/custom-page.mdx | 8 +++-----
2 files changed, 6 insertions(+), 10 deletions(-)
diff --git a/packages/document/docs/en/guide/basic/custom-page.mdx b/packages/document/docs/en/guide/basic/custom-page.mdx
index dc6e94b80..988afe29a 100644
--- a/packages/document/docs/en/guide/basic/custom-page.mdx
+++ b/packages/document/docs/en/guide/basic/custom-page.mdx
@@ -102,14 +102,14 @@ In order to get Tailwind CSS working with Rspress, you can use the following ste
1. Install Tailwind CSS:
-
+
2. Create a `postcss.config.js` file containing `tailwindcss` plugin:
```js title="postcss.config.js"
module.exports = {
plugins: {
- tailwindcss: {},
+ '@tailwindcss/postcss': {},
},
};
```
@@ -129,9 +129,7 @@ module.exports = {
4. Include the Tailwind directives in your CSS styles file from [Custom Styles](#custom-styles):
```css title=styles/index.css
-@import 'tailwindcss/base';
-@import 'tailwindcss/components';
-@import 'tailwindcss/utilities';
+@import 'tailwindcss';
```
> For most up to date configuration, please refer to the official [Tailwind CSS documentation](https://tailwindcss.com/docs/installation/using-postcss).
diff --git a/packages/document/docs/zh/guide/basic/custom-page.mdx b/packages/document/docs/zh/guide/basic/custom-page.mdx
index 6c6a1f9e2..d41bedc38 100644
--- a/packages/document/docs/zh/guide/basic/custom-page.mdx
+++ b/packages/document/docs/zh/guide/basic/custom-page.mdx
@@ -105,14 +105,14 @@ export default defineConfig({
1. 安装 Tailwind CSS：
-
+
2. 创建一个包含 `tailwindcss` 插件的 `postcss.config.js` 文件：
```js title="postcss.config.js"
module.exports = {
plugins: {
- tailwindcss: {},
+ '@tailwindcss/postcss': {},
},
};
```
@@ -132,9 +132,7 @@ module.exports = {
4. 在你的 CSS 样式文件中添加 Tailwind 指令，参考 [自定义样式](#自定义样式)：
```css title=styles/index.css
-@import 'tailwindcss/base';
-@import 'tailwindcss/components';
-@import 'tailwindcss/utilities';
+@import 'tailwindcss';
```
> 请参考官方 [Tailwind CSS 文档](https://tailwindcss.com/docs/installation/using-postcss) 了解最新用法。