Typography with Tailwind CSS

Tailwind is awesome. You should use it.

지금까지 Tailwind로 문서나 블로그 포스트를 스타일링하는 것은 타이포그래피에 대한 깊은 이해와 복잡한 CSS가 필요한 작업이었습니다.

기본적으로 Tailwind는 단락, 제목, 목록 등의 모든 기본 브라우저 스타일을 제거합니다. 이는 애플리케이션 UI를 만들 때는 유용하지만, CMS나 마크다운 파일에서 가져온 콘텐츠를 스타일링할 때는 예상치 못한 결과를 가져올 수 있습니다.

실제로 많은 사람들이 이런 질문을 합니다:

Tailwind가 내 h1 요소의 기본 스타일을 왜 제거하나요? 어떻게 비활성화하나요? 다른 기본 스타일도 모두 잃는다는 게 무슨 의미인가요?

@tailwindcss/typography 플러그인은 이런 문제를 해결하기 위한 우리의 시도입니다. 기본 스타일을 비활성화하는 대신, 더 나은 해결책을 제공합니다.

이 플러그인은 새로운 prose 클래스를 추가하여 일반 HTML 콘텐츠를 아름답고 잘 포맷된 문서로 변환할 수 있습니다:

<article class="prose">
  <h1>치즈 갈릭 브레드: 과학이 말하는 진실</h1>
  <p>
    수년 동안 부모들은 자녀들에게 치즈 갈릭 브레드의 건강상 이점을 
    강조해왔습니다. 이 음식은 우리 문화에서 매우 상징적인 위치를 
    차지하여 아이들이 할로윈 때 따뜻하고 치즈가 녹은 빵으로 
    분장하기도 합니다.
  </p>
  <p>
    하지만 최근 연구에 따르면 이 유명한 전채 요리가 전국에서 
    발생하고 있는 일련의 광견병 사례와 연관이 있을 수 있다고 합니다.
  </p>
</article>

다양한 마크다운 요소 테스트

이제부터는 플러그인을 테스트하기 위해 작성한 다양한 마크다운 요소들을 보여드리겠습니다. 굵은 텍스트, 순서 없는 목록, 순서 있는 목록, 코드 블록, 인용문, 그리고 기울임체 등이 포함됩니다.

이러한 사용 사례를 모두 다루는 것이 중요한 이유는 다음과 같습니다:

1. 모든 것이 기본적으로 잘 보여야 합니다.
2. 사실 첫 번째 이유가 전부입니다. 이것이 플러그인의 핵심입니다.
3. 세 번째 이유를 추가했지만, 사실 두 개의 항목보다 세 개의 항목이 더 실제적으로 보이기 때문입니다.

코드 블록 스타일링

기본적으로 코드 블록도 괜찮아 보여야 합니다. 다음은 기본 tailwind.config.js 파일의 예시입니다:

module.exports = {
  purge: [],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

중첩된 목록

중첩된 목록은 보통 보기 좋지 않습니다. 하지만 어쩔 수 없이 사용해야 할 때가 있죠:

1. 중첩된 목록은 거의 좋은 선택이 아닙니다.
   • 잘 정리된 것처럼 보일 수 있지만, 사실 읽기 어려운 형태를 만들 뿐입니다.
   • UI에서의 중첩된 내비게이션도 좋지 않습니다.
   • 소스 코드에서 폴더를 과도하게 중첩하는 것도 도움이 되지 않습니다.
2. 두 번째 항목이 필요하니 여기 있습니다.
   • 두 단계 이상 중첩하는 것은 스타일링하지 않을 것 같습니다.
   • 두 단계도 많은데, 세 단계는 확실히 나쁜 생각입니다.
   • 네 단계를 중첩한다면 감옥에 가야 할 겁니다.

표 스타일링

표도 잘 보여야 합니다:

인라인 코드

인라인 코드도 잘 보여야 합니다. 예를 들어 <span> 요소나 @tailwindcss/typography에 대해 이야기할 때처럼요.

GitHub Flavored Markdown

remark-gfm을 사용하여 GitHub Flavored Markdown도 지원합니다.

자동 링크 변환도 지원됩니다. 예를 들어 example.com 이나 https://example.com 같은 링크는 자동으로 a 태그로 변환됩니다.

이메일 링크도 마찬가지입니다: contact@example.com