125k

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 を追加

dir="rtl" 属性と lang="ar" 属性を html タグに追加します。lang="ar" は対象言語に更新してください。

次に、__root.tsx で direction="rtl" prop を持つ 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