Skip to content

Commit abf6008

Browse files
committed
docs(v1-tailwind4): update v1 how to use tailwind 4
1 parent ab36dc2 commit abf6008

File tree

2 files changed

+6
-10
lines changed

2 files changed

+6
-10
lines changed

packages/document/docs/en/guide/basic/custom-page.mdx

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -102,14 +102,14 @@ In order to get Tailwind CSS working with Rspress, you can use the following ste
102102

103103
1. Install Tailwind CSS:
104104

105-
<PackageManagerTabs command="install tailwindcss -D" />
105+
<PackageManagerTabs command="install tailwindcss @tailwindcss/postcss -D" />
106106

107107
2. Create a `postcss.config.js` file containing `tailwindcss` plugin:
108108

109109
```js title="postcss.config.js"
110110
module.exports = {
111111
plugins: {
112-
tailwindcss: {},
112+
'@tailwindcss/postcss': {},
113113
},
114114
};
115115
```
@@ -129,9 +129,7 @@ module.exports = {
129129
4. Include the Tailwind directives in your CSS styles file from [Custom Styles](#custom-styles):
130130

131131
```css title=styles/index.css
132-
@import 'tailwindcss/base';
133-
@import 'tailwindcss/components';
134-
@import 'tailwindcss/utilities';
132+
@import 'tailwindcss';
135133
```
136134

137135
> For most up to date configuration, please refer to the official [Tailwind CSS documentation](https://tailwindcss.com/docs/installation/using-postcss).

packages/document/docs/zh/guide/basic/custom-page.mdx

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -105,14 +105,14 @@ export default defineConfig({
105105

106106
1. 安装 Tailwind CSS:
107107

108-
<PackageManagerTabs command="install tailwindcss -D" />
108+
<PackageManagerTabs command="install tailwindcss @tailwindcss/postcss -D" />
109109

110110
2. 创建一个包含 `tailwindcss` 插件的 `postcss.config.js` 文件:
111111

112112
```js title="postcss.config.js"
113113
module.exports = {
114114
plugins: {
115-
tailwindcss: {},
115+
'@tailwindcss/postcss': {},
116116
},
117117
};
118118
```
@@ -132,9 +132,7 @@ module.exports = {
132132
4. 在你的 CSS 样式文件中添加 Tailwind 指令,参考 [自定义样式](#自定义样式)
133133

134134
```css title=styles/index.css
135-
@import 'tailwindcss/base';
136-
@import 'tailwindcss/components';
137-
@import 'tailwindcss/utilities';
135+
@import 'tailwindcss';
138136
```
139137

140138
> 请参考官方 [Tailwind CSS 文档](https://tailwindcss.com/docs/installation/using-postcss) 了解最新用法。

0 commit comments

Comments
 (0)