# 타이포그래피 플러그인

`@tailwindcss/typography`은 공식 타이포그래피 플러그인의 1:1 PHP 포팅입니다. `prose` 클래스를 비롯한 수정자를 추가해 렌더링된 HTML 블록의 제목, 문단, 목록, 인용문, 코드, 표 등에 요소마다 직접 스타일을 지정하지 않아도 가독성 높은 타이포그래피 기본값을 적용합니다.

## 사용법

플러그인을 `@plugin`로 불러오고 유틸리티 레이어를 가져온 다음, 콘텐츠를 감싸는 컨테이너에 `prose`를 적용하세요:

```php
use TailwindPHP\tw;

$css = tw::generate(
    '<article class="prose prose-lg"><h1>Title</h1><p>Body text…</p></article>',
    '@plugin "@tailwindcss/typography"; @import "tailwindcss/utilities.css";'
);
```

생성된 `.prose` 규칙은 `--tw-prose-*` 사용자 지정 속성(`--tw-prose-body`, `--tw-prose-headings`, `--tw-prose-links`, `--tw-prose-code`, `--tw-prose-quotes` 등)을 정의하고, 이를 통해 하위 요소에 스타일을 적용합니다.

## 클래스

### 크기

크기 수정자는 전체 글자 크기 체계를 조정합니다. 기본 `prose` 클래스와 함께 적용합니다:

| 클래스 | 용도 |
|-------|---------|
| `prose` | 기본 크기 |
| `prose-sm` | 작게 |
| `prose-base` | 기본 |
| `prose-lg` | 크게 |
| `prose-xl` | 매우 크게 |
| `prose-2xl` | 2배 매우 크게 |

```html
<article class="prose prose-xl">…</article>
```

### 색상 테마

색상 수정자는 본문 텍스트, 제목, 테두리에 사용되는 회색 계열을 바꿉니다:

| 클래스 | 테마 |
|-------|-------|
| `prose-slate` | 슬레이트 |
| `prose-gray` | 회색 |
| `prose-zinc` | 징크 |
| `prose-neutral` | 뉴트럴 |
| `prose-stone` | 스톤 |

### 반전

`prose-invert`은 어두운 배경에서 사용할 수 있도록 색상 팔레트를 반전합니다. 크기 및 색상 수정자와 자유롭게 조합하세요:

```html
<article class="prose prose-lg prose-slate prose-invert">…</article>
```

## 옵션

### `className`

기본적으로 플러그인은 `prose` 클래스를 생성합니다. `className`을 설정하면 클래스 이름이 바뀌며 수정자도 새 이름을 따릅니다(`markdown`, `markdown-lg`, `markdown-invert`, …). 설정하면 `prose` 클래스는 생성되지 않습니다:

```php
$css = tw::generate(
    '<article class="markdown markdown-lg">…</article>',
    '
        @plugin "@tailwindcss/typography" {
            className: "markdown";
        }
        @import "tailwindcss/utilities.css";
    '
);
```

## 참고

`prose-headings:underline` 또는 `prose-a:text-blue-600` 같은 요소 수정자는 등록되어 있지만, 현재 릴리스에서는 요소 선택자 없이 컴파일됩니다. 따라서 유틸리티가 내부 제목이나 링크 대신 전체 `prose` 컨테이너에 적용됩니다([#10](https://github.com/inline0/tailwindphp/issues/10)). 수정 사항이 적용될 때까지 해당 요소에 자체 CSS를 사용하세요.

이는 TailwindCSS v4 포팅입니다. 원래 플러그인의 일부 v3 전용 동작(`.dark` 선택자 기반 다크 모드 및 일부 요소 변형 설정 형식)은 v4에서 다르게 작동하며 지원되지 않습니다. 대신 `prose-invert` 수정자와 v4 변형을 사용하세요.

`@plugin` 지시문과 로드 방법은 [플러그인](https://tailwindphp.inline0.dev/ko/docs/plugins)을 참조하세요.