Tanstack Start

前提条件

开始之前，请确保你已配置：

• Tailwind CSS 4
• Fumadocs MDX（按照 Vite 设置指南，并创建好 lib/source.ts 等必要文件）

安装

npm i fumadocs-core fumadocs-ui

样式配置

在 Tailwind CSS 文件（styles/app.css）中添加 Fumadocs CSS 导入：

@import 'tailwindcss';
@import 'fumadocs-ui/css/neutral.css';
@import 'fumadocs-ui/css/preset.css';

必需文件设置

需要创建四个基本文件：

1. components/mdx.tsx — 导出 MDX 组件配置
2. lib/layout.shared.tsx — 定义基础布局选项
3. routes/docs/$.tsx — 带有服务端/客户端加载器的主文档页面路由
4. routes/api/search.ts — 使用 Orama 的搜索 API 端点

Root Provider 包装

在 __root.tsx 中使用 RootProvider 包裹整个应用，以在全局启用 Fumadocs 功能。

创建文档

在 content/docs 目录中使用带有 frontmatter 元数据（title、description）的 MDX 文件开始编写文档。