> For AI agents: the complete documentation index is available at https://rspress.rs/llms.txt, the full documentation bundle is available at https://rspress.rs/llms-full.txt.

# Tailwind CSS

[Tailwind CSS](https://tailwindcss.com/) 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:

```mdx title="docs/foo.mdx"
# Foo

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

Rspress is built on [Rsbuild](https://rsbuild.rs/), so Tailwind CSS v4 can be integrated with the same Rsbuild plugin recommended by Rsbuild. For more details, see:

- [Rsbuild - Tailwind CSS v4](https://rsbuild.rs/guide/styling/tailwindcss)
- [Rsbuild - Tailwind CSS v3](https://rsbuild.rs/guide/styling/tailwindcss-v3)
- [Rsbuild - Tailwind CSS plugin](https://rsbuild.rs/plugins/list/plugin-tailwindcss)

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

```sh [npm]
npm add @rsbuild/plugin-tailwindcss tailwindcss -D
```

```sh [yarn]
yarn add @rsbuild/plugin-tailwindcss tailwindcss -D
```

```sh [pnpm]
pnpm add @rsbuild/plugin-tailwindcss tailwindcss -D
```

```sh [bun]
bun add @rsbuild/plugin-tailwindcss tailwindcss -D
```

```sh [deno]
deno add npm:@rsbuild/plugin-tailwindcss npm:tailwindcss -D
```
### Create Tailwind CSS file
Create a `tailwind.css` file in the root of your project:
```css title="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.
:::
:::tip 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](https://tailwindcss.com/docs/dark-mode) for details.
:::
### Configure Rspress
In your `rspress.config.ts`, use the `globalStyles` option to import the Tailwind CSS file:
```ts title="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:
```mdx title="docs/foo.mdx"
# Foo

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