[Tailwind] react-markdown 적용하기

🤔 문제 상황

react-markdown을 적용이 안되서 찾아보니까
tailwind가 기본적인 html의 스타일을 제어하고 있어서
그냥 적용하면 안된다는 것을 알았다.
그래서 마크다운을 사용할 부분만 tailwind의 스타일이 적용되지 않도록 해야한다.

✅ 해결 방법

다행히 tailwind 자체에서 markdown 컴포넌트를 사용할 수 있도록
플러그인을 제공하고 있었다.
해당 플러그인을 사용하면 하위 태그는 tailwind 스타일이 적용되지 않는다.

1. @tailwindcss/typography 설치
   https://tailwindcss.com/docs/typography-plugin

   $ npm install @tailwindcss/typography

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

   // tailwind.config.js 
   module.exports = { 
       theme: { // ... }, 
       plugins: [ require('@tailwindcss/typography'), // ... ], }

3. react-markdown, remark-gfm 설치
   remark-gfm는 react-markdown에서 제공하지 않는 마크다운 문법을 제공해준다

   $ npm install react-markdown 
   $ npm install remark-gfm

4. @tailwindcss/typography 적용
   상단 태그의 className에 prose 추가

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

💥 최종 코드

import React from "react";
import ReactMarkdown from "react-markdown";
import remarkGfm from "remark-gfm";
import tw from "tailwind-styled-components";

const MarkDownContainer = tw.div``;

const markdown = `
  **강조**

  # 헤더

  > 인용 ~스크로크~  URL: https://reactjs.org.

  * Lists
  * [ ] todo
  * [x] done

  A table:

  | a | b |
  | - | - |
`;

const MarkDownRenderer = () => {
  return (
    <MarkDownContainer className="prose">
      <ReactMarkdown remarkPlugins={[remarkGfm]}>{markdown}</ReactMarkdown>
    </MarkDownContainer>
  );
};

export default MarkDownRenderer;

이렇게 하면 내용이 잘 표시되어보인다!

---

참고
velog.io/@1-blue