Đăng ký quyền truy cập sớm

Nhập tên của bạn cùng email hoặc số điện thoại. Chúng tôi sẽ liên hệ và gửi thông tin truy cập Tajo.

Trên trang này

Tích hợp với một theme sẵn có

Theme này được thiết kế để hoạt động liền mạch với các dự án Tailwind CSS v4 khác.

Các bước bắt buộc

Sao chép thư mục src/docs từ theme này sang dự án sẵn có của bạn.

Hầu hết các thành phần của theme này nằm trong thư mục src/docs. Vì vậy bước đầu tiên đơn giản là sao chép toàn bộ thư mục này sang dự án sẵn có của bạn (giữ nguyên cấu trúc thư mục tại src/docs).
Nhập các style của docs vào tệp css toàn cục của bạn.

Bạn có thể làm điều này bằng cách thêm dòng sau vào tệp global.css của bạn, ngay sau phần import theme của tailwind:
src/styles/global.css
```
/* theme definition import */
@import "./tailwind-theme.css";

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

Thêm content collection của docs vào tệp cấu hình content collection của trang web.

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

Thêm các thành phần mdx vào tích hợp 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",
      ],
    }),
  ],
});

Thêm các trang docs vào trang web của bạn.

Từ theme Tajo, hãy sao chép toàn bộ thư mục src/pages/docs vào thư mục src/pages/docs của trang web của bạn.

Các bước tùy chọn

Phông chữ

Theme này dùng phông chữ Inter theo mặc định. Bạn nên cài đặt phông chữ này cục bộ từ fontsource.

Sau đó, trong tệp fonts.css của bạn hãy thêm nội dung sau:

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

Phông chữ thay thế

Bạn cũng có thể dùng phông chữ khác. Chỉ cần đảm bảo bạn thêm các phông chữ cần thiết vào tệp fonts.css, và cập nhật thuộc tính font-family trong tệp src/docs/styles/docs-global.css của bạn.

Info

Bạn cũng nên preload phông chữ của mình trong thành phần src/docs/layouts/BaseHead.astro, tương tự như phông chữ 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" />