Skip to content

Commit

Permalink
docs: translate Tailwind CSS setup
Browse files Browse the repository at this point in the history
  • Loading branch information
chenjiahan committed Mar 24, 2024
1 parent 6ea2cba commit fbe3960
Show file tree
Hide file tree
Showing 2 changed files with 46 additions and 6 deletions.
10 changes: 4 additions & 6 deletions packages/document/docs/en/guide/basic/custom-page.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -100,11 +100,11 @@ Here are some commonly used global styles:

In order to get Tailwind CSS working with Rspress, you can use the following steps:

1. Install Tailwind CSS and its dependencies:
1. Install Tailwind CSS:

<PackageManagerTabs command="install tailwindcss -D" />

2. Create a `postcss.config.js` file containing `tailwindcss` and `autoprefixer` plugins:
2. Create a `postcss.config.js` file containing `tailwindcss` plugin:

```js title="postcss.config.js"
module.exports = {
Expand All @@ -114,20 +114,18 @@ module.exports = {
};
```

3. Create a `tailwind.config.js` file and make sure all the content files are included:
3. Create a `tailwind.config.js` file and make sure all the content files are included via `content`:

```js title="tailwind.config.js"
module.exports = {
content: ['./src/**/*.tsx'],
content: ['./src/**/*.tsx', './docs/**/*.mdx'],
theme: {
extend: {},
},
plugins: [],
};
```

> You can also include and style React component directly in the `.mdx` files by including those files in the `content` value, such as `content: ['./src/**/*.tsx', './docs/**/*.mdx']`.
4. Include the Tailwind directives in your CSS styles file from [Custom Styles](#custom-styles):

```css title=styles/index.css
Expand Down
42 changes: 42 additions & 0 deletions packages/document/docs/zh/guide/basic/custom-page.mdx
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import { PackageManagerTabs } from '@theme';

# 自定义页面

Rspress 提供了多种方式能让你自定义页面的内容,包括:
Expand Down Expand Up @@ -97,6 +99,46 @@ export default defineConfig({

> 如果想了解更多内部的全局样式,可以查看 [vars.css](https://github.com/web-infra-dev/rspress/blob/main/packages/theme-default/src/styles/vars.css)
### Tailwind CSS

要在 Rspress 中使用 Tailwind CSS,你可以按照以下步骤操作:

1. 安装 Tailwind CSS:

<PackageManagerTabs command="install tailwindcss -D" />

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

```js title="postcss.config.js"
module.exports = {
plugins: {
tailwindcss: {},
},
};
```

3. 创建一个 `tailwind.config.js` 文件,并确保 `content` 包含了所有使用 Tailwind CSS 的文件:

```js title="tailwind.config.js"
module.exports = {
content: ['./src/**/*.tsx', './docs/**/*.mdx'],
theme: {
extend: {},
},
plugins: [],
};
```

4. 在你的 CSS 样式文件中添加 Tailwind 指令,参考 [自定义样式](#自定义样式)

```css title=styles/index.css
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
```

> 请参考官方 [Tailwind CSS 文档](https://tailwindcss.com/docs/installation/using-postcss) 了解最新用法。
## 自定义布局结构

Rspress 提供了 `pageType` 配置来让你自定义页面的布局结构。
Expand Down

0 comments on commit fbe3960

Please sign in to comment.