Zum Inhalt springen

Style Rendered Markdown with Tailwind Typography

Dieser Inhalt ist noch nicht in deiner Sprache verfügbar.

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:

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'),
// ...
],
}

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