close
Rspress
  • English

      • Tailwind CSS

      Tailwind CSS is a utility-first CSS framework for rapidly building custom user interfaces. It can be used with MDX files in Rspress to help you style your documentation more efficiently, for example:

      docs/foo.mdx
      # Foo

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

      Rspress is built on Rsbuild, so Tailwind CSS v4 can be integrated with the same Rsbuild plugin recommended by Rsbuild. For more details, see:

      Below is a guide for integrating Tailwind CSS v4 with Rspress.

      Tip

      All Rspress built-in components use BEM naming conventions and do not use Tailwind CSS internally. Your project owns the Tailwind CSS dependency and build plugin, which avoids version conflicts with Rspress.

      Install dependencies

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

      Create Tailwind CSS file

      Create a tailwind.css file in the root of your project:

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

      Tailwind CSS v4 is not designed to be used with CSS preprocessors like Sass, Less, or Stylus. Keep @import 'tailwindcss'; at the beginning of a .css file.

      Dark Mode

      Rspress toggles dark mode by checking the .dark class on the html element, so you need to configure @custom-variant. See Tailwind Docs - Dark Mode for details.

      Configure Rspress

      In your rspress.config.ts, use the globalStyles option to import the Tailwind CSS file:

      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()],
  },
});

      If your project already has a PostCSS setup, you can also follow the Rsbuild guide to use @tailwindcss/postcss instead.

      Usage

      Now you can use Tailwind utility classes in your MDX files:

      docs/foo.mdx
      # Foo

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