close
Rspress
  • 中文

      • Tailwind CSS

      Tailwind CSS 是一个以 utility class 为核心的 CSS 框架，用于快速构建自定义用户界面。它可以配合 Rspress 中的 MDX 文件使用，帮助你更高效地创作文档样式，例如。

      docs/foo.mdx
      # Foo

<div className="text-3xl font-bold underline">Hello world!</div>

      Rspress 基于 Rsbuild 构建，因此可以使用 Rsbuild 推荐的插件方式接入 Tailwind CSS v4。更多详情请参考：

      下面介绍如何在 Rspress 中集成 Tailwind CSS v4。

      Tip

      Rspress 所有内置组件均采用 BEM 命名规范，没有内置使用 Tailwind CSS。Tailwind CSS 依赖和构建插件由你的项目自行管理，因此不会与 Rspress 产生版本冲突。

      安装依赖

      npm
      yarn
      pnpm
      bun
      deno
      npm add @rsbuild/plugin-tailwindcss tailwindcss -D

      创建 Tailwind CSS 文件

      在项目根目录创建 tailwind.css 文件：

      tailwind.css
      @import 'tailwindcss';
@custom-variant dark (&:where(.dark, .dark *));
      Tip

      Tailwind CSS v4 不适合与 Sass、Less 或 Stylus 等 CSS 预处理器一起使用。请将 @import 'tailwindcss'; 放在 .css 文件的开头。

      暗黑模式

      Rspress 通过判断 html 元素上的 .dark 类来实现暗黑模式切换，因此需配置 @custom-variant，请参阅 Tailwind 文档 - Dark Mode。

      配置 Rspress

      在 rspress.config.ts 中，使用 globalStyles 选项引入 Tailwind CSS 文件：

      rspress.config.ts
      import * as path from 'node:path';
import { pluginTailwindcss } from '@rsbuild/plugin-tailwindcss';
import { defineConfig } from '@rspress/core';

export default defineConfig({
  root: path.join(__dirname, 'docs'),
  globalStyles: path.join(__dirname, 'tailwind.css'),
  builderConfig: {
    plugins: [pluginTailwindcss()],
  },
});

      如果你的项目已经有 PostCSS 配置，也可以参考 Rsbuild 文档改用 @tailwindcss/postcss 接入。

      使用

      现在你可以在 MDX 文件中使用 Tailwind 工具类：

      docs/foo.mdx
      # Foo

<div className="text-3xl font-bold underline">Hello world!</div>