تنظیمات

راهنمای پیکربندی فارسی یو آی در پروژه‌

پیکربندی Tailwind

globals.css

تنظیمات اصلی استایل و متغیرهای CSS

@import 'tailwindcss';

@theme inline {
  --font-sans: 'Vazirmatn', sans-serif;
  --radius: 0.5rem;

  /* رنگ‌های اصلی */
  --color-primary: #4e46e5;
  --color-secondary: #6b7280;
  --color-accent: #10b981;
}

پشتیبانی RTL

layout.tsx

تنظیم جهت راست به چپ در فایل layout

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="fa" dir="rtl">
      <body>{children}</body>
    </html>
  )
}

تم تیره و روشن

ThemeProvider

استفاده از next-themes برای مدیریت تم

import { ThemeProvider } from "next-themes"

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <ThemeProvider
      attribute="class"
      defaultTheme="system"
      enableSystem
      disableTransitionOnChange
    >
      {children}
    </ThemeProvider>
  )
}

فونت فارسی

Vazirmatn

نصب و استفاده از فونت وزیرمتن

npm install @fontsource/vazirmatn

// در فایل layout.tsx
import "@fontsource/vazirmatn/400.css"
import "@fontsource/vazirmatn/500.css"
import "@fontsource/vazirmatn/700.css"