Styliser le rendu Markdown avec la typographie Tailwind

Vous pouvez utiliser le plugin Typography de Tailwind pour styliser le rendu Markdown à partir de sources telles que les collections de contenu d’Astro.

Cette recette vous apprendra à créer un composant Astro réutilisable pour styliser votre contenu Markdown en utilisant les classes utilitaires de Tailwind.

Prérequis

Titre de la section Prérequis

Un projet Astro qui :

• a l’intégration Astro Tailwind installée
• utilise les collections de contenu d’Astro.

Mise en place de @tailwindcss/typography

Titre de la section Mise en place de @tailwindcss/typography

Tout d’abord, installez @tailwindcss/typography en utilisant votre gestionnaire de paquets préféré.

npm

npm install -D @tailwindcss/typography

pnpm

pnpm add -D @tailwindcss/typography

Yarn

yarn add --dev @tailwindcss/typography

Ensuite, ajoutez le paquet en tant que plugin dans votre fichier de configuration Tailwind.

tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  theme: {
    // ...
  },
  plugins: [
   require('@tailwindcss/typography'),
    // ...
  ],
}

Recette

Titre de la section Recette

1. Créez un composant <Prose /> pour fournir un élément <div> avec une balise <slot /> pour votre Markdown rendu. Ajoutez la classe de style prose ainsi que les modificateurs d’éléments Tailwind dans l’élément parent.

   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>

   Astuce

   Le plugin @tailwindcss/typography utilise des modificateurs d’éléments pour styliser les composants enfants d’un conteneur avec la classe prose.

   Ces modificateurs suivent la syntaxe générale suivante :

   prose-[element]:class-to-apply

   Par exemple, prose-h1:font-bold donne à toutes les balises <h1> la classe Tailwind font-bold.

2. Interrogez votre entrée de collection sur la page où vous voulez rendre votre Markdown. Passez le composant <Content /> de await entry.render() à <Prose /> en tant qu’enfant pour envelopper votre contenu Markdown dans les styles Tailwind.

   src/pages/index.astro

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

Resources

Titre de la section Resources

• Documentation de Tailwind Typography