Tailwind CSS Typography 소개

지금까지 Tailwind로 글, 문서, 블로그 포스트를 스타일링하는 것은 타이포그래피에 대한 예리한 눈과 많은 복잡한 커스텀 CSS가 필요한 지루한 작업이었습니다.

기본적으로 Tailwind는 문단, 제목, 목록 등에서 모든 기본 브라우저 스타일을 제거합니다. 이는 애플리케이션 UI를 구축할 때 유용합니다. 사용자 에이전트 스타일을 되돌리는 데 시간을 덜 들이기 때문입니다. 하지만 CMS의 리치 텍스트 에디터나 마크다운 파일에서 가져온 콘텐츠를 스타일링하려고 할 때는 놀랍고 직관적이지 않을 수 있습니다.

실제로 많은 불만이 있었고, 사람들은 다음과 같은 질문을 자주 했습니다.

왜 Tailwind가 내 h1 엘리먼트의 기본 스타일을 제거하나요? 이걸 비활성화하려면 어떻게 해야 하나요? 다른 기본 스타일도 모두 잃는다는 건 무슨 뜻인가요?

우리는 여러분의 말을 이해하지만, 단순히 기본 스타일을 비활성화하는 것이 진짜 원하는 것인지 확신할 수 없습니다. 대시보드 UI에서 p 엘리먼트를 사용할 때마다 성가신 마진을 제거하고 싶지는 않을 것입니다. 그리고 블로그 포스트가 사용자 에이전트 스타일을 사용하길 원하지도 않을 것입니다. 여러분은 그것이 멋지게 보이길 원할 뿐, 형편없게 보이길 원하지 않을 것입니다.

그래서 오늘 우리는 @tailwindcss/typography 플러그인을 발표하게 되어 기쁩니다. 이 플러그인은 기본 스타일을 비활성화하는 것과 같은 어리석은 일을 하지 않고도 여러분이 진짜로 원하는 것을 제공합니다.

이 플러그인은 새로운 prose 클래스 세트를 추가합니다. 이 클래스를 일반 HTML 콘텐츠 블록에 적용하면 아름답고 잘 포맷된 문서로 변환됩니다.

<article class="prose lg:prose-xl">
  <h1>치즈가 든 갈릭 브레드: 과학이 말하는 것</h1>
  <p>
    수년 동안 부모들은 치즈가 든 갈릭 브레드를 먹는 것이 건강에 좋다고 아이들에게 말해왔고, 이 음식은 우리 문화에서 아이들이 할로윈에 따뜻하고 치즈가 든 빵으로 분장할 정도로 상징적인 지위를 얻었습니다.
  </p>
  <p>
    하지만 최근 연구에 따르면 이 유명한 전채 요리가 전국적으로 발생하는 광견병 사례와 관련이 있을 수 있다고 합니다.
  </p>
  <!-- ... -->
</article>

그렇다면 실제로 어떻게 보일까요? 여러분은 지금 바로 그것을 보고 있습니다. 우리는 이 블로그의 콘텐츠를 스타일링하기 위해 이 플러그인을 사용합니다.

문서를 확인하고 오늘 바로 사용해 보세요.

이 글에 대해 이야기하고 싶으신가요? GitHub에서 토론하기 →