Vraag vroegtijdige toegang aan

Vul je voornaam en een e-mailadres of telefoonnummer in. We nemen daarna contact met je op en leggen uit hoe je toegang krijgt tot Tajo.

Op deze pagina

Integreren met een bestaand thema

Dit thema is ontworpen om naadloos samen te werken met andere Tailwind CSS v4-projecten.

Vereiste stappen

Kopieer de map src/docs van dit thema naar je bestaande project.

De meeste onderdelen van dit thema staan in de map src/docs. De eerste stap is dus om die hele map naar je bestaande project te kopiëren (zodat de mapstructuur op src/docs hetzelfde blijft).
Importeer de docs-stijlen in je globale css-bestand.

Dat doe je door de volgende regel aan je global.css-bestand toe te voegen, na de import van het tailwind-thema:
src/styles/global.css
```
/* theme definition import */
@import "./tailwind-theme.css";

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

Voeg de docs content collection toe aan het configuratiebestand voor de content collections van je site.

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

Voeg de mdx-componenten toe aan de AutoImport-integratie

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

Voeg de docs-pagina’s toe aan je site.

Kopieer vanuit het Tajo-thema de volledige map src/pages/docs naar de map src/pages/docs van je site.

Optionele stappen

Lettertypen

Dit thema gebruikt standaard het lettertype Inter. Het is aan te raden om het lettertype lokaal te installeren via fontsource.

Voeg daarna het volgende toe aan je fonts.css-bestand:

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

Andere lettertypen

Je kunt ook andere lettertypen gebruiken. Zorg er alleen voor dat je de benodigde lettertypen aan je fonts.css-bestand toevoegt en dat je de eigenschap font-family in je src/docs/styles/docs-global.css-bestand aanpast.

Info

Preload je lettertype ook in de component src/docs/layouts/BaseHead.astro, net zoals bij het Inter-lettertype.

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

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