Demandez un accès anticipé

Indiquez votre prénom ainsi qu’une adresse e-mail ou un numéro de téléphone. Nous vous recontacterons pour vous communiquer les modalités d’accès à Tajo.

Sur cette page

Intégrer Tajo à un thème existant

Ce thème est conçu pour fonctionner sans friction avec les autres projets Tailwind CSS v4.

Étapes obligatoires

Copiez le dossier src/docs de ce thème vers votre projet existant.

La plupart des éléments de ce thème se trouvent dans le dossier src/docs. La première étape consiste donc simplement à copier ce dossier entier vers votre projet existant (en conservant la même structure de dossiers, à savoir src/docs).
Importez les styles de la documentation dans votre fichier css global.

Pour cela, ajoutez la ligne suivante à votre fichier global.css, après l’import du thème tailwind :
src/styles/global.css
```
/* theme definition import */
@import "./tailwind-theme.css";

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

Ajoutez la collection de contenu de la documentation au fichier de configuration des collections de contenu de votre 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,
};

Ajoutez les composants mdx à l’intégration 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",
      ],
    }),
  ],
});

Ajoutez les pages de documentation à votre site.

Depuis le thème Tajo, copiez l’intégralité du dossier src/pages/docs dans le dossier src/pages/docs de votre site.

Étapes facultatives

Polices

Ce thème utilise la police Inter par défaut. Nous vous recommandons d’installer la police localement depuis fontsource.

Ajoutez ensuite ce qui suit dans votre fichier 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;
}

Autres polices

Vous pouvez également utiliser d’autres polices. Veillez simplement à ajouter les polices nécessaires à votre fichier fonts.css, puis à mettre à jour la propriété font-family dans votre fichier src/docs/styles/docs-global.css.

Info

Vous devriez également précharger votre police dans le composant src/docs/layouts/BaseHead.astro, comme cela est fait pour la police 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" />