Tailwind Typography 뜯어보기

상세 페이지 구현이 잘 되었지만 뭔가 이상하다.

마크다운 박스가 왜 이렇게 좁지?

prose-2xl로 하면 글씨가 너무 대문짝만해서 lg: 기준 prose-xl로 코딩을 했다.
뭐가 문젠지 prose-xl로 하니까 마크다운 전체 너비가 아무리 css를 고쳐봐도 늘어나지 않고 저렇게 좁은 박스 안에 들어가 있다.

이건 prose가 범인이 아닐까 싶어서 Tailwind Typography를 찾아봤다.
Tailwind Typography Github Repository

tailwindcss-typography/src/styles.js를 뚫어져라 봤다.

//tailwindcss-typography/src/styles.js
	//...
    css: [
      {
        color: 'var(--tw-prose-body)',
        maxWidth: '65ch',
        p: {}, // Required to maintain correct order when merging
 	//...

maxWidth: '65ch;

prose 클래스는 한 줄에 65개의 문자만 보여지도록 제한하는 최대 너비 제한이 걸있었다.
그래서 내가 넓은 lg: 에서 폰트 크기가 마음에 들어서 prose-xl로 설정하니까 65ch 제한 때문에 박스가 좁아진거다.

max-w-* 로 덮어쓰기

prose 스타일을 그대로 유지하면서 마크다운 박스 전체 너비가 넓어지도록 max-w-* 로 덮어써줬다. 적당한 반응형도 해줬다.

<article className="prose prose-invert prose-lg max-w-lg md:prose-xl md:max-w-2xl lg:max-w-4xl mx-auto py-10">
    
  <h1 className="text-center">{post.title}</h1>
  <div dangerouslySetInnerHTML={{ __html: html }} />
</article>

결과

짜잔!
넓어졌다.

Tailwind의 유틸리티 클래스는 기본값이 강력하다!