使用 Tailwind Typography 渲染 Markdown 样式

你可以使用 Tailwind 的 Typography 插件来设计来自 Astro 的 内容集合 等来源的渲染 Markdown 样式。

¥You can use Tailwind’s Typography plugin to style rendered Markdown from sources such as Astro’s content collections.

本秘籍将教你如何创建可重用的 Astro 组件，以使用 Tailwind 的实用程序类来设计 Markdown 内容的样式。

¥This recipe will teach you how to create a reusable Astro component to style your Markdown content using Tailwind’s utility classes.

先决条件

标题部分 先决条件

¥Prerequisites

Astro 项目：

¥An Astro project that:

• 已安装 Astro 的 Tailwind 集成。

• 使用 Astro 的 内容集合。

设置 @tailwindcss/typography

标题部分 设置 @tailwindcss/typography

¥Setting Up @tailwindcss/typography

首先，使用你首选的包管理器安装 @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

然后，将该包作为插件添加到 Tailwind 配置文件中。

¥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 版式文档