You can use Tailwind’s Typography plugin to style rendered Markdown from sources such as Astro’s content collections.

This recipe will teach you how to create a reusable Astro component to style your Markdown content using Tailwind’s utility classes.

An Astro project that:

• has Tailwind’s Vite plugin installed.
• uses Astro’s content collections.

First, install @tailwindcss/typography using your preferred package manager.

npm install -D @tailwindcss/typography

pnpm add -D @tailwindcss/typography

yarn add --dev @tailwindcss/typography

Then, add the package as a plugin in your Tailwind configuration file.

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

1. Create a <Prose /> component to provide a wrapping <div> with a <slot /> for your rendered Markdown. Add the style class prose alongside any desired Tailwind element modifiers in the parent element.

   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>

2. Query your collection entry on the page you want to render your Markdown. Pass the <Content /> component from await render(entry) to <Prose /> as a child to wrap your Markdown content in Tailwind styles.

   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>

• Tailwind Typography Documentation