Skip to content

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:

Setting Up @tailwindcss/typography

Section titled Setting Up @tailwindcss/typography

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

Terminal window
npm install -D @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'),
// ...
],
}
  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 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>