Style Rendered Markdown with Tailwind Typography

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 Astro’s Tailwind integration 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.

/** @type {import('tailwindcss').Config} */

export default {
  theme: {
    // ...
  },
  plugins: [
   require('@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.

   ---
   ---
   <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 entry.render() to <Prose /> as a child to wrap your Markdown content in Tailwind styles.

   ---
   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>

• Tailwind Typography Documentation

More recipes