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, and the Tailwind CSS configuration is consistent with 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, which avoids conflicts with Tailwind CSS classes. You can freely use Tailwind v4 or v3 without worrying about style collisions.

      Install dependencies

      npm
      yarn
      pnpm
      bun
      deno
      npm add tailwindcss @tailwindcss/postcss -D

      Create PostCSS config

      Create a postcss.config.mjs file in the root of your project:

      postcss.config.mjs
      export default {
  plugins: {
    '@tailwindcss/postcss': {},
  },
};

      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 *));
      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 { defineConfig } from '@rspress/core';

export default defineConfig({
  root: path.join(__dirname, 'doc'),
  globalStyles: path.join(__dirname, 'tailwind.css'),
});

      Usage

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

      doc/foo.mdx
      # Foo

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