121k
New

TanStack Start

PreviousNext

创建一个带有 RTL 支持的全新 TanStack Start 项目。

创建项目

使用 --rtl 参数和 start 模板创建一个新项目。

如果你已经使用 shadcn/create 创建了项目，可以跳过此步骤。

pnpm dlx shadcn@latest create --template start --rtl

这会创建一个带有 rtl: true 标志的 components.json 文件。

components.json
{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "base-nova",
  "rtl": true
}

添加 DirectionProvider

在 html 标签上添加 dir="rtl" 和 lang="ar" 属性。根据你的目标语言，更新 lang="ar"。

然后在你的 __root.tsx 中，用带有 direction="rtl" 属性的 DirectionProvider 组件包裹你的应用：

src/routes/__root.tsx
import { DirectionProvider } from "@/components/ui/direction"
 
export const Route = createRootRoute({
  component: RootComponent,
})
 
function RootComponent() {
  return (
    <html lang="ar" dir="rtl">
      <head>
        <Meta />
      </head>
      <body>
        <DirectionProvider direction="rtl">{children}</DirectionProvider>
        <Scripts />
      </body>
    </html>
  )
}

添加字体

为了获得最佳的 RTL 体验，我们推荐使用对目标语言有良好支持的字体。Noto 是一个很棒的字体系列，且与 Inter 和 Geist 配合良好。

使用 Fontsource 安装字体：

pnpm add @fontsource-variable/noto-sans-arabic

在你的 styles.css 中导入字体：

src/styles.css
@import "tailwindcss";
@import "tw-animate-css";
@import "shadcn/tailwind.css";
@import "@fontsource-variable/noto-sans-arabic";
 
@theme inline {
  --font-sans: "Noto Sans Arabic Variable", sans-serif;
}

对于其他语言，如希伯来语，你可以使用 @fontsource-variable/noto-sans-hebrew。

添加组件

现在你可以开始向项目添加组件了。CLI 会帮你处理 RTL 支持。

pnpm dlx shadcn@latest add item