Tanstack Start

快速入门

在继续之前，请确保配置以下内容：

Tailwind CSS 4。
Fumadocs MDX：按照设置指南操作，并创建如 lib/source.ts 等必需文件。

安装

npm i fumadocs-core fumadocs-ui

样式

将以下内容添加到您的 Tailwind CSS 文件中：

styles/app.css

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

创建页面

创建以下路由：

import type { BaseLayoutProps } from 'fumadocs-ui/layouts/shared';

export function baseOptions(): BaseLayoutProps {
  return {
    nav: {
      title: 'Tanstack Start',
    },
  };
}

将整个应用包装在 Fumadocs 提供者之下：

__root.tsx

import {
  createRootRoute,
  HeadContent,
  Outlet,
  Scripts,
} from '@tanstack/react-router';
import * as React from 'react';
import { RootProvider } from 'fumadocs-ui/provider/base';
import { TanstackProvider } from 'fumadocs-core/framework/tanstack';

export const Route = createRootRoute({
  component: RootComponent,
});

function RootComponent() {
  return (
    <RootDocument>
      <Outlet />
    </RootDocument>
  );
}

function RootDocument({ children }: { children: React.ReactNode }) {
  return (
    <html suppressHydrationWarning>
      <head>
        <HeadContent />
      </head>
      <body className="flex flex-col min-h-screen">
        <TanstackProvider>
          <RootProvider>{children}</RootProvider>
        </TanstackProvider>
        <Scripts />
      </body>
    </html>
  );
}

完成

您可以在 content/docs 开始编写文档：

content/docs/index.mdx

---
title: Hello World
---

我爱 Fumadocs

快速入门

安装

样式

创建页面

完成

On this page