컨텐츠로 이동

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

Section titled Prerequisites

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

Recipe

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

Section titled Resources