컨텐츠로 이동

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:

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