Bed om tidlig adgang til Tajo

Indtast dit fornavn og en e-mailadresse eller et telefonnummer. Vi kontakter dig med oplysninger om adgang til Tajo.

På denne side

Integrér med et eksisterende tema

Dette tema er bygget til at spille sammen med andre Tailwind CSS v4-projekter uden besvær.

Nødvendige trin

Kopiér mappen src/docs fra dette tema over i dit eksisterende projekt.

Det meste af temaet ligger under mappen src/docs. Første trin er derfor blot at kopiere hele mappen over i dit eksisterende projekt (behold den samme mappestruktur under src/docs).
Importér temaets styles i din globale css-fil.

Det gør du ved at tilføje denne linje i din global.css-fil efter importen af tailwind-temaet:
src/styles/global.css
```
/* theme definition import */
@import "./tailwind-theme.css";

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

Tilføj docs-indholdssamlingen i konfigurationsfilen for dit sites indholdssamlinger.

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

Tilføj mdx-komponenterne til AutoImport-integrationen

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",
      ],
    }),
  ],
});

Tilføj docs-siderne til dit site.

Kopiér hele mappen src/pages/docs fra Tajo-temaet over i dit sites mappe src/pages/docs.

Valgfrie trin

Skrifttyper

Dette tema bruger som standard skrifttypen Inter. Vi anbefaler, at du installerer skrifttypen lokalt fra fontsource.

Tilføj derefter dette i din fonts.css-fil:

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

Andre skrifttyper

Du kan også bruge andre skrifttyper. Sørg blot for at tilføje de nødvendige skrifttyper i din fonts.css-fil og opdatere egenskaben font-family i din src/docs/styles/docs-global.css-fil.

Info

Du bør også preloade din skrifttype i komponenten src/docs/layouts/BaseHead.astro, ligesom Inter-skrifttypen er det.

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

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