TailwindCSS에서 Markdown을 보여줄 때

react-markdown으로 마크다운을 보여주려했는데 bold 외 나머지 마크다운 문법이 적용되지 않는 문제가 발생했다..

tailwindCSS를 설정할 때 @tailwind base 로 preflight를 설정해준다.

preflight는 tailwind프로젝트를 위한 base style인데 각기 다른 브라우저에서 설정되어 있는 스타일들의 충돌을 막기 위해 제공된다.

https://tailwindcss.com/docs/preflight

이 설정때문에 heading이나 list 같은 기본태그의 스타일을 없애버리기 때문에 markdown이 파싱된 태그들의 스타일이 잘 나오지 않는 것이었다.

이는 @tailwindcss/typography 플러그인을 활용해서 해결할 수 있었다.

1. @tailwindcss/typography 설치

npm install -D @tailwindcss/typography

2. tailwind.config.js에 플러그인 추가

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('@tailwindcss/typography'),
    // ...
  ],
}

3. markdown을 보여주는 부분에 'prose' 클래스 추가

'use client';

import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';

type Props = {
  text: string;
};

export default function MarkDown({ text }: Props) {
  return (
    <ReactMarkdown className="prose" remarkPlugins={[remarkGfm]}>
      {text}
    </ReactMarkdown>
  );
}

https://tailwindcss.com/docs/typography-plugin