[React, Tailwind CSS] dangerouslySetInnerHTML 적용 안 될 때

jsx 속성 중 dangerouslySetInnerHTML은 문자열을 주입하여 innerHTML을 적용하는 역할을 한다. 이때 변환되는 마크업 태그는 jsx가 아니라 일반 html 태그가 된다.

따라서 Tailwind CSS 클래스를 적용 시 className이 아니라 class를 입려해야 정상적으로 적용된다.

const Dangerous = () => {
  // not <strong className="...">Hello World!</strong>
  const dangerHtml = `
<strong class="font-bold bg-gray-400 rounded-md">Hello World!</strong>
`;
  return <div dangerouslySetInnerHTML={{ __html: dangerHtml }} />
}

참고
github/tailwindcss - issue #7756
stackoverflow - why styles don't apply on dangerouslySetInnerHTML