Posez votre question et obtenez un résumé du document en referencant cette page et le Provider AI de votre choix
Le contenu de cette page a été traduit à l'aide d'une IA.
Voir la dernière version du contenu original en anglaisSi vous avez une idée d’amélioration pour améliorer cette documentation, n’hésitez pas à contribuer en submitant une pull request sur GitHub.
Lien GitHub de la documentationCopier le Markdown du doc dans le presse-papiers
import { Steps } from '@astrojs/starlight/components'; import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
Vous pouvez utiliser le module d'extension Typography de Tailwind pour mettre en forme 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 mettre en forme votre contenu Markdown en utilisant les classes utilitaires de Tailwind.
Prérequis
Un projet Astro qui :
- a [le module d'extension Vite de Tailwind](/fr/guides/styling/#tailwind) installé - utilise les [collections de contenu](/fr/guides/content-collections/) d'Astro.Mise en place de @tailwindcss/typography
Tout d'abord, installez @tailwindcss/typography en utilisant votre gestionnaire de paquets préféré.
Ensuite, ajoutez le paquet en tant que module d'extension dans votre fichier de configuration Tailwind.
Copier le code dans le presse-papiers
@import 'tailwindcss';@plugin '@tailwindcss/typography';Recette
```astro title="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> ``` :::tip Le module d'extension `@tailwindcss/typography` utilise des [**modificateurs d'éléments**](https://tailwindcss.com/docs/typography-plugin#element-modifiers) pour mettre en forme 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 afficher votre Markdown. Passez le composant <Content /> de await render(entry) à <Prose /> en tant qu'enfant pour envelopper votre contenu Markdown dans les styles Tailwind.
```astro title="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> ```