Richiedi l’accesso anticipato

Inserisci il tuo nome e un indirizzo email o un numero di telefono. Ti contatteremo con tutte le informazioni per accedere a Tajo.

In questa pagina

Integrazione con un tema esistente

Questo tema è progettato per funzionare senza attriti con altri progetti Tailwind CSS v4.

Passaggi obbligatori

Copia la cartella src/docs di questo tema nel tuo progetto esistente.

La maggior parte degli elementi di questo tema si trova nella cartella src/docs. Il primo passaggio consiste quindi semplicemente nel copiare l’intera cartella nel tuo progetto esistente (per mantenere la stessa struttura di cartelle in src/docs).
Importa gli stili della documentazione nel tuo file css globale.

Puoi farlo aggiungendo la riga seguente al tuo file global.css dopo l’import del tema tailwind:
src/styles/global.css
```
/* theme definition import */
@import "./tailwind-theme.css";

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

Aggiungi la content collection della documentazione al file di configurazione delle content collection del tuo sito.

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

Aggiungi i componenti mdx all’integrazione 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",
      ],
    }),
  ],
});

Aggiungi le pagine della documentazione al tuo sito.

Dal tema Tajo copia l’intera cartella src/pages/docs nella cartella src/pages/docs del tuo sito.

Passaggi facoltativi

Font

Questo tema usa il font Inter come predefinito. Ti consigliamo di installare il font in locale da fontsource.

Poi, nel tuo file fonts.css, aggiungi quanto segue:

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

Font alternativi

Puoi anche usare font diversi. Assicurati solo di aggiungere i font necessari al tuo file fonts.css e di aggiornare la proprietà font-family nel tuo file src/docs/styles/docs-global.css.

Info

Dovresti anche precaricare il tuo font nel componente src/docs/layouts/BaseHead.astro, come avviene per il font 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" />