Demandez un accès anticipé

Indiquez votre prénom et votre adresse e-mail professionnelle. Nous vous enverrons un lien pour confirmer votre demande d’accès à Tajo.

Sur cette page

Intégrer Tajo à un thème existant

Illustration · données d’exemple

Exemple de synchronisation

Vérifier un enregistrement

Source

Shopify

Statut du connecteur: En cours

Destination

Brevo

Statut du connecteur: Actif

Correspondance des champs

Champ source	Champ de destination	Valeur d’exemple
`record.id`	`source_id`	`record_1042`
`record.updated_at`	`updated_at`	`2026-10-18T08:00:00Z`
`record.value`	`value`	`sample_value`

Préparer
Vérifier un enregistrement
Approuver cette version

Les statuts concernent chaque connecteur et ne garantissent pas que cette synchronisation soit prête. Champs illustratifs. Vérifiez le schéma réel et les autorisations avant toute synchronisation.

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" />