Tailwind CSS

Tailwind CSS — это утилитарный CSS-фреймворк для быстрого создания пользовательских интерфейсов. Его можно использовать с MDX-файлами в Rspress, чтобы более эффективно стилизовать вашу документацию, например:

docs/foo.mdx

# Foo

<div className="text-3xl font-bold underline">Привет, мир!</div>

Rspress построен на базе Rsbuild, и конфигурация Tailwind CSS полностью соответствует Rsbuild. Подробности смотрите здесь:

Ниже приведено руководство по интеграции Tailwind CSS v4 с Rspress.

Совет

Все встроенные компоненты Rspress используют соглашение об именовании BEM и не используют Tailwind CSS внутри себя, что исключает конфликты с классами Tailwind CSS. Вы можете свободно использовать Tailwind v4 или v3, не беспокоясь о столкновениях стилей.

Установка зависимостей

npm

yarn

pnpm

bun

deno

npm add tailwindcss @tailwindcss/postcss -D

Создание конфигурации PostCSS

Создайте файл postcss.config.mjs в корне вашего проекта:

postcss.config.mjs

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

Создание файла Tailwind CSS

Создайте файл tailwind.css в корне вашего проекта:

tailwind.css

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

Тёмный режим

Rspress переключает тёмный режим, проверяя наличие класса .dark у элемента html, поэтому вам нужно настроить @custom-variant. Подробнее см. в документации Tailwind — Dark Mode.

Настройка Rspress

В файле rspress.config.ts используйте опцию globalStyles для импорта файла Tailwind CSS:

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

Использование

Теперь вы можете использовать utility-классы Tailwind в своих MDX-файлах:

doc/foo.mdx

# Foo

<div className="text-3xl font-bold underline">Привет, мир!</div>

#Tailwind CSS

#Установка зависимостей

#Создание конфигурации PostCSS

#Создание файла Tailwind CSS