Tailwind Typography를 사용하여 Markdown을 렌더링한 스타일

Tailwind의 Typography 플러그인을 사용하여 Astro의 콘텐츠 컬렉션과 같은 소스에서 렌더링된 Markdown의 스타일을 지정할 수 있습니다.

이 레시피에서는 Tailwind의 유틸리티 클래스를 사용하여 Markdown 콘텐츠의 스타일을 지정하기 위해 재사용 가능한 Astro 컴포넌트를 만드는 방법을 알려줍니다.

전제 조건

섹션 제목: 전제 조건

Astro 프로젝트는 다음과 같습니다.

• Astro의 Tailwind 통합이 설치되어 있어야 합니다.
• Astro의 콘텐츠 컬렉션을 사용해야 합니다.

@tailwindcss/typography 설정

섹션 제목: @tailwindcss/typography 설정

먼저, 선호하는 패키지 관리자를 사용하여 @tailwindcss/typography를 설치하세요.

npm

npm install -D @tailwindcss/typography

pnpm

pnpm add -D @tailwindcss/typography

Yarn

yarn add --dev @tailwindcss/typography

그런 다음 패키지를 Tailwind 구성 파일에 플러그인으로 추가하세요.

tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  theme: {
    // ...
  },
  plugins: [
   require('@tailwindcss/typography'),
    // ...
  ],
}

레시피

섹션 제목: 레시피

1. 렌더링된 Markdown에 <slot />이 포함된 래핑 <div>을 제공하기 위해 <Prose /> 컴포넌트를 만듭니다. 상위 요소에 원하는 Tailwind 요소 수정자와 함께 스타일 클래스 prose를 추가합니다.

   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>

   팁

   @tailwindcss/typography 플러그인은 요소 수정자를 사용하여 prose 클래스가 있는 컨테이너의 하위 컴포넌트 스타일을 지정합니다.

   이러한 수정자는 다음과 같은 일반 구문을 따릅니다.

   prose-[element]:class-to-apply

   예를 들어 prose-h1:font-bold는 모든 <h1> 태그에 font-bold Tailwind 클래스를 제공합니다.

2. Markdown을 렌더링하려는 페이지에서 컬렉션 항목을 쿼리합니다. Markdown 콘텐츠를 Tailwind 스타일로 래핑하려면 await entry.render()의 <Content /> 컴포넌트를 <Prose />의 하위 항목으로 전달하세요.

   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>

자료

섹션 제목: 자료

• Tailwind Typography 문서