Ajukan akses awal

Masukkan nama depan serta email atau nomor telepon Anda. Kami akan menghubungi Anda dengan detail akses Tajo.

Di halaman ini

Integrasi dengan Tema yang Sudah Ada

Tema ini dirancang untuk bekerja mulus dengan proyek Tailwind CSS v4 lainnya.

Langkah wajib

Salin folder src/docs dari tema ini ke proyek Anda yang sudah ada.

Sebagian besar isi tema ini berada di dalam folder src/docs. Jadi langkah pertama adalah menyalin seluruh folder tersebut ke proyek Anda yang sudah ada (pertahankan struktur folder yang sama di src/docs).
Impor gaya dokumentasi ke berkas css global Anda.

Ini bisa dilakukan dengan menambahkan baris berikut ke berkas global.css Anda setelah impor tema tailwind:
src/styles/global.css
```
/* theme definition import */
@import "./tailwind-theme.css";

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

Tambahkan content collection dokumentasi ke berkas konfigurasi content collection situs Anda.

// 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,
};

Tambahkan komponen mdx ke integrasi 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",
      ],
    }),
  ],
});

Tambahkan halaman dokumentasi ke situs Anda.

Dari tema Tajo, salin seluruh folder src/pages/docs ke folder src/pages/docs milik situs Anda.

Langkah opsional

Font

Tema ini menggunakan font Inter secara bawaan. Kami menyarankan Anda memasang font tersebut secara lokal dari fontsource.

Kemudian, di berkas fonts.css Anda, tambahkan berikut ini:

/* 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;
}

Font alternatif

Anda juga bisa menggunakan font yang berbeda. Pastikan saja Anda menambahkan font yang diperlukan ke berkas fonts.css Anda, lalu perbarui properti font-family di berkas src/docs/styles/docs-global.css Anda.

Info

Anda juga sebaiknya melakukan preload terhadap font Anda di komponen src/docs/layouts/BaseHead.astro, serupa dengan font 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" />