타이포그래피 플러그인

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

사용법

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

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 클래스와 함께 적용합니다:

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

색상 테마

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

반전

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

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

옵션

className

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

$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). 수정 사항이 적용될 때까지 해당 요소에 자체 CSS를 사용하세요.

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

@plugin 지시문과 로드 방법은 플러그인을 참조하세요.