Стилизация Markdown с помощью Tailwind Typography

Плагин Tailwind Typography — это лучший способ оформить отрендеренный Markdown (например, из коллекций контента), так как он автоматически добавляет красивые стили для заголовков, списков, ссылок и изображений.

Предварительные требования

• Проект Astro с установленным Tailwind.
• Использование коллекций контента.

Настройка

1. Установите плагин:

   npm
   shell npm install -D @tailwindcss/typography
   pnpm
   shell pnpm add -D @tailwindcss/typography
   Yarn
   shell yarn add --dev @tailwindcss/typography

2. Добавьте его в файл src/styles/global.css:

   src/styles/global.css

   @import 'tailwindcss';
   @plugin '@tailwindcss/typography';

3. Создайте компонент-обертку <Prose />, который применяет класс prose:

   src/components/Prose.astro

   <div class="prose dark:prose-invert max-w-none">
     <slot />
   </div>

4. Используйте обертку на странице, где вы рендерите контент:

   ---
   import Prose from '../components/Prose.astro';
   import { getEntry, render } from 'astro:content';
   
   const entry = await getEntry('blog', 'my-post');
   const { Content } = await render(entry);
   ---
   <Prose>
     <Content />
   </Prose>