Tailwind CSS home page
Go back

타이포그래피를 손쉽게, 다크 모드에서도

Date

오늘 우리는 Tailwind CSS Typography 플러그인의 다음 버전을 발표합니다. 이번 버전은 쉬운 다크 모드 지원, 새로운 커스텀 API, 그리고 지원 방법을 찾기 어려웠던 not-prose 클래스를 제공합니다.

새로운 기능을 모두 확인하려면 공식 릴리스 비디오를 확인하세요.

Tailwind CSS Typography v0.5는 Tailwind CSS v3.0을 위해 설계되었습니다. 따라서 최신 버전의 Tailwind를 사용 중인지 확인한 후, npm에서 새로운 플러그인 릴리스를 설치하세요:

npm install -D @tailwindcss/typography@latest

플러그인이 제공하는 모든 기능에 대해 더 알아보려면 업데이트된 typography 플러그인 문서를 확인하세요.

다크 모드 지원 간소화

다크 모드에서 타이포그래피 색상을 쉽게 바꿀 수 있도록 prose-invert 클래스를 추가했습니다:

<body class="bg-white dark:bg-gray-900">
  <article class="prose dark:prose-invert">
    {{ markdown }}
  </article>
</body>

다크 테마는 전문 디자인 팀이 직접 제작했으며, 사용 중인 그레이 스케일에 자동으로 적응합니다.

회색 스케일 선택하기

Tailwind CSS v3.0은 기본적으로 다섯 가지 회색 세트를 제공하며, 업데이트된 타이포그래피 플러그인에는 각 세트에 대한 클래스가 포함되어 있어 사이트의 나머지 부분과 타이포그래피를 쉽게 맞출 수 있습니다:

<article class="prose prose-slate">
  {{ markdown }}
</article>

또한 내부적으로 색상 테마를 정의하는 방식을 단순화하여, 필요할 경우 여러분만의 색상을 추가하기가 더 쉬워졌습니다.

자세한 내용은 문서를 참고하세요.

HTML 기반 커스텀 API

여러분의 글쓰기 스타일에서 특정 엘리먼트를 조정할 수 있는 다양한 수정자를 HTML에서 직접 사용할 수 있게 추가했습니다:

<article class="prose prose-img:rounded-xl prose-headings:underline prose-a:text-blue-600">
  {{ markdown }}
</article>

이를 통해 브랜드에 맞게 링크 스타일을 지정하거나, 이미지에 둥근 모서리를 추가하는 등 다양한 작업을 쉽게 할 수 있습니다.

더 자세한 내용은 엘리먼트 수정자 문서를 참고하세요.

prose 스타일 제거하기

콘텐츠 중간에 콘텐츠가 아닌 HTML을 삽입해야 할 때가 있나요? 이제 not-prose로 감싸면 prose 스타일이 적용되지 않도록 할 수 있습니다:

<article class="prose">
  <h1>My Heading</h1>
  <p>...</p>

  <div class="not-prose">
    <!-- prose 스타일이 적용되지 않아야 하는 HTML -->
  </div>

  <p>...</p>
  <!-- ... -->
</article>

사용해 보고 싶나요? typography 플러그인 문서를 확인해 자세히 알아보고 시작해 보세요.