Capítulo 86 de 108

RTL (TanStack Start)

Core Idea

Configura RTL em um projeto TanStack Start: flag do CLI, DirectionProvider no root route (__root.tsx), e fonte via Fontsource.

Key Concepts

  • npx shadcn@latest create --template start --rtl: cria projeto com rtl: true em components.json.
  • __root.tsx: onde os atributos dir="rtl"/lang="ar" e o DirectionProvider são configurados, dentro de createRootRoute.
  • Fontsource: mesmo padrão do Vite (@fontsource-variable/noto-sans-arabic), importado em src/styles.css.

Code Examples

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>
  )
}
  • O que demonstra: Wiring de RTL no componente raiz de rota do TanStack Start, incluindo <Meta />/<Scripts /> do framework.
@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;
}
  • O que demonstra: Mesmo padrão de registro de fonte via @theme inline usado no Vite.

Key Takeaways

  1. Estrutura idêntica em espírito ao setup do Next/Vite: CLI flag → atributos HTML → DirectionProvider → fonte → add de componentes.
  2. createRootRoute é o ponto de configuração central do TanStack Start, análogo ao app/layout.tsx do Next ou main.tsx do Vite.
  3. Trocar noto-sans-arabic por noto-sans-hebrew (ou outro) conforme o idioma alvo.

Connects To

  • rtl: guia geral.
  • rtl/next, rtl/vite: mesmos passos adaptados a outros frameworks.
AnteriorRTL (Vite)PróximoForms