import { Steps } from '@astrojs/starlight/components'; import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';

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

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

전제 조건

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

- [Tailwind Vite 플러그인](/ko/guides/styling/#tailwind)이 설치되어 있어야 합니다.

@tailwindcss/typography 설정

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

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

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

레시피

```astro title="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 `@tailwindcss/typography` 플러그인은 [**요소 수정자**](https://tailwindcss.com/docs/typography-plugin#element-modifiers)를 사용하여 `prose` 클래스가 있는 컨테이너의 하위 컴포넌트 스타일을 지정합니다. 이러한 수정자는 다음과 같은 일반 구문을 따릅니다. ``` prose-[element]:class-to-apply ``` 예를 들어 `prose-h1:font-bold`는 모든 `<h1>` 태그에 `font-bold` Tailwind 클래스를 제공합니다. :::

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

```astro title="src/pages/index.astro" --- import Prose from '../components/Prose.astro'; import Layout from '../layouts/Layout.astro'; import { getEntry, render } from 'astro:content'; const entry = await getEntry('collection', 'entry'); const { Content } = await render(entry); --- <Layout> <Prose> <Content /> </Prose> </Layout> ```

자료

Astro 과정