For AI agents: the complete documentation index is available at /rspress-russian/llms.txt, the full documentation bundle is available at /rspress-russian/llms-full.txt, and this page is available as Markdown at /rspress-russian/ui/tailwindcss.md.
close

    Tailwind CSS

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

    docs/foo.mdx
    # Foo

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

    Rspress построен на базе Rsbuild, поэтому Tailwind CSS v4 можно интегрировать с помощью того же плагина Rsbuild, который рекомендуется самим Rsbuild. Подробности смотрите здесь:

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

    Совет

    Все встроенные компоненты 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 *));
    Совет

    Tailwind CSS v4 не предназначен для использования с CSS-препроцессорами, такими как Sass, Less или Stylus. Размещайте @import 'tailwindcss'; в начале файла .css.

    Тёмный режим

    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 { 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 вместо этого.

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

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

    docs/foo.mdx
    # Foo

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