ابتدائی رسائی کی درخواست کریں

اپنا پہلا نام اور ای میل یا فون نمبر درج کریں۔ ہم Tajo تک رسائی کی تفصیلات کے ساتھ آپ سے رابطہ کریں گے۔

اس صفحہ پر

موجودہ تھیم کے ساتھ انٹیگریشن

یہ تھیم اس طرح ڈیزائن کیا گیا ہے کہ وہ دیگر Tailwind CSS v4 پروجیکٹس کے ساتھ بغیر کسی رکاوٹ کے کام کرے۔

لازمی اقدامات

اس تھیم سے src/docs فولڈر اپنے موجودہ پروجیکٹ میں کاپی کریں۔

اس تھیم کی زیادہ تر اشیاء src/docs فولڈر کے تحت موجود ہیں۔ چنانچہ پہلا قدم صرف یہ ہے کہ اس پورے فولڈر کو اپنے موجودہ پروجیکٹ میں کاپی کر دیا جائے (تاکہ src/docs پر وہی فولڈر ساخت برقرار رہے)۔
دستاویزات کے اسٹائلز اپنی گلوبل css فائل میں امپورٹ کریں۔

یہ کام اپنی global.css فائل میں tailwind تھیم امپورٹ کے بعد درج ذیل لائن شامل کر کے کیا جا سکتا ہے:
src/styles/global.css
```
/* theme definition import */
@import "./tailwind-theme.css";

/* docs styles */
@import "@/docs/styles/docs-global.css";
```

دستاویزات کا content collection اپنی سائٹ کی content collection کنفیگ فائل میں شامل کریں۔

// other collections...

const docsCollection = defineCollection({
  loader: glob({ pattern: "**/[^_]*{md,mdx}", base: "./src/docs/data/docs" }),
  schema: () =>
    z.object({
      title: z.string(),
      description: z.string().optional(),
      sidebar: z
        .object({
          label: z.string().optional(),
          order: z.number().optional(),
          badge: z
            .object({
              text: z.string(),
              variant: z.enum(["note", "tip", "caution", "danger", "info"]).default("note"),
            })
            .optional(),
        })
        .optional(),
      tableOfContents: z
        .object({
          minHeadingLevel: z.number().min(1).max(6).optional(),
          maxHeadingLevel: z.number().min(1).max(6).optional(),
        })
        .optional(),
      pagefind: z.boolean().optional(),
      mappingKey: z.string().optional(),
      draft: z.boolean().optional(),
    }),
});

export const collections = {
  // other collection....
  docs: docsCollection,
};

mdx کمپونینٹس کو AutoImport انٹیگریشن میں شامل کریں

export default defineConfig({
  // other config options...
  integrations: [
    AutoImport({
      imports: [
        // other imports...
        "@/docs/components/mdx-components/Aside.astro",
        "@/docs/components/mdx-components/Badge.astro",
        "@/docs/components/mdx-components/Button.astro",
        "@/docs/components/mdx-components/Steps.astro",
        "@/docs/components/mdx-components/Tabs.astro",
        "@/docs/components/mdx-components/TabsContent.astro",
        "@/docs/components/mdx-components/TabsList.astro",
        "@/docs/components/mdx-components/TabsTrigger.astro",
      ],
    }),
  ],
});

دستاویزات کے صفحات اپنی سائٹ میں شامل کریں۔

Tajo تھیم سے پورا src/pages/docs فولڈر اپنی سائٹ کے src/pages/docs فولڈر میں کاپی کریں۔

اختیاری اقدامات

فونٹس

یہ تھیم بطور ڈیفالٹ Inter فونٹ استعمال کرتا ہے۔ تجویز کیا جاتا ہے کہ فونٹ کو fontsource سے مقامی طور پر انسٹال کیا جائے۔

پھر اپنی fonts.css فائل میں درج ذیل شامل کریں:

/* inter-latin-wght-normal */
@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(@fontsource-variable/inter/files/inter-latin-wght-normal.woff2)
    format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
    U+FFFD;
}

متبادل فونٹس

آپ مختلف فونٹس بھی استعمال کر سکتے ہیں۔ بس یہ یقینی بنائیں کہ آپ ضروری فونٹس اپنی fonts.css فائل میں شامل کریں، اور اپنی src/docs/styles/docs-global.css فائل میں font-family پراپرٹی اپ ڈیٹ کریں۔

Info

آپ کو اپنا فونٹ src/docs/layouts/BaseHead.astro کمپونینٹ میں بھی پری لوڈ کرنا چاہیے، بالکل Inter فونٹ کی طرح۔

---
import InterVariable from "@fontsource-variable/inter/files/inter-latin-wght-normal.woff2";
---

<link rel="preload" href={InterVariable} as="font" type="font/woff2" crossorigin="anonymous" />