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.

Prerequisites

An Astro project that:

• has Astro’s Tailwind integration installed.
• uses Astro’s content collections.

Setting Up @tailwindcss/typography

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

npm

npm install -D @tailwindcss/typography

pnpm

pnpm add -D @tailwindcss/typography

Yarn

yarn add --dev @tailwindcss/typography

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

tailwind.config.js

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

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

Recipe

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>

   Tip

   The @tailwindcss/typography plugin uses element modifiers to style child components of a container with the prose class.

   These modifiers follow the following general syntax:

   prose-[element]:class-to-apply

   For example, prose-h1:font-bold gives all <h1> tags the font-bold Tailwind class.

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.

   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

• Tailwind Typography Documentation