Gestalte dein gerendertes Markdown mit dem Tailwind-CSS Typography-Plugin

Du kannst das Typography-Plugin von Tailwind nutzen, um das Aussehen von gerenderten Markdown-Inhalten aus Quellen wie etwa Inhaltssammlungen (EN) von Astro zu gestalten.

In diesem Rezept erfährst du, wie du eine wiederverwendbare Astro-Komponente erstellst, um das Aussehen deiner Markdown-Inhalte mithilfe der Utility-Klassen von Tailwind zu gestalten.

Voraussetzungen

Ein Astro-Projekt, welches:

• das Vite-Plugin von Tailwind (EN) installiert hat.
• Astros Sammlungen von Inhalten (EN) verwendet.

Einrichtung des @tailwindcss/typography-Plugins

Installiere zunächst das @tailwindcss/typography-Plugin unter Nutzung des von dir bevorzugten Paketmanagers.

npm

npm install -D @tailwindcss/typography

pnpm

pnpm add -D @tailwindcss/typography

Yarn

yarn add --dev @tailwindcss/typography

Füge nun das Paket als Plugin in deine Tailwind Konfigurationsdatei ein.

src/styles/global.css

@import 'tailwindcss';
@plugin '@tailwindcss/typography';

Anleitung

1. Erstelle eine <Prose />-Komponente, um ein umschließendes <div>-Element mit einem <slot /> für Ihren gerenderten Markdown-Text bereitzustellen. Fügen Sie die Stilklasse prose zusammen mit den gewünschten Tailwind-Elementwandlern im übergeordneten <div>-Element hinzu.

   src/components/Prose.astro

   ---
   ---
   <div
     class="prose dark:prose-invert
     prose-h1:font-bold prose-h1:text-xl
     prose-a:text-blue-600 prose-p:text-justify prose-img:rounded-xl
     prose-headings:underline">
     <slot />
   </div>

   Tipp

   Das @tailwindcss/typography-Plugin nutzt Elementwandler um das Aussehen von untergeordneten Elementen innerhalb eines mit der prose-Klasse ausgezeichneten Containers zu gestalten.

   Diese Elementwandler folgen der folgenden allgemeinen Syntax:

   prose-[Element]:anzuwendende-Klasse

   Beispielsweise weist prose-h1:font-bold allen <h1>-Tags die Tailwind-Klasse font-bold zu.

2. Rufen Sie Ihren Collection-Eintrag auf der Seite ab, auf der Sie Ihr Markdown rendern möchten. Übergeben Sie die Komponente <Content /> aus await render(entry) als untergeordnete Komponente an <Prose />, um Ihren Markdown-Inhalt mit Tailwind-Stilen zu umgeben.

   src/pages/index.astro

   ---
   import Prose from '../components/Prose.astro';
   import Layout from '../layouts/Layout.astro';
   import { getEntry, render } from 'astro:content';
   
   const entry = await getEntry('collection', 'entry');
   const { Content } = await render(entry);
   ---
   <Layout>
     <Prose>
       <Content />
     </Prose>
   </Layout>

Ressourcen

• Dokumentation zum Tailwind Typography-Plugin (EN)