Ansök om tidig åtkomst

Fyll i ditt förnamn och en e-postadress eller ett telefonnummer. Vi hör av oss med information om hur du får åtkomst till Tajo.

På denna sida

Integrera med ett befintligt tema

Det här temat är byggt för att fungera sömlöst tillsammans med andra Tailwind CSS v4-projekt.

Nödvändiga steg

Kopiera mappen src/docs från det här temat till ditt befintliga projekt.

Det mesta i temat ligger under mappen src/docs. Första steget är därför helt enkelt att kopiera hela den mappen till ditt befintliga projekt (behåll samma mappstruktur på src/docs).
Importera dokumentationens stilar i din globala css-fil.

Det gör du genom att lägga till följande rad i din global.css-fil efter importen av tailwind-temat:
src/styles/global.css
```
/* theme definition import */
@import "./tailwind-theme.css";

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

Lägg till innehållssamlingen för dokumentationen i sajtens konfigurationsfil för innehållssamlingar.

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

Lägg till mdx-komponenterna i 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",
      ],
    }),
  ],
});

Lägg till dokumentationssidorna på din sajt.

Kopiera hela mappen src/pages/docs från Tajo-temat till sajtens mapp src/pages/docs.

Valfria steg

Typsnitt

Temat använder typsnittet Inter som standard. Vi rekommenderar att du installerar typsnittet lokalt från fontsource.

Lägg sedan till följande 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;
}

Andra typsnitt

Du kan också använda andra typsnitt. Se bara till att du lägger till de typsnitt som behövs i din fonts.css-fil, och uppdaterar egenskapen font-family i din fil src/docs/styles/docs-global.css.

Info

Du bör också förladda ditt typsnitt i komponenten src/docs/layouts/BaseHead.astro, på samma sätt som Inter-typsnittet.

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

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