[Tailwind CSS] Custom Class

HTML 태그에 개별적으로 class를 부여할 수 없는 경우 커스터마이징할 수 있다.

예를 들어, 이 글에서 파싱한 마크다운 문서는 클라이언트 페이지에서 아주 심플하게 보이며, 따로 작성한 태그가 아니기 때문에 class를 통한 디자인이 불가능하다.

CSS 파일에서 Tailwind CSS 적용

CSS 파일 내에서 Tailwind 문법을 적용할 때는 @apply를 사용하면 간단하다.

h1 {
  @apply mb-5 text-2xl text-red-500;
}

p {
  @apply mb-2 text-gray-600;
}

결과

그러나 단점은 해당 페이지만이 아닌 모든 h1, p 태그에 적용된다는 점이다. 이때 커스터마이징을 통해 해결할 수 있다.

커스터마이징 Class

문법을 적용시킬 태그를 감싼 영역에 클래스를 추가한다. 참고한 글의 코드를 빌려오면,

<div dangerouslySetInnerHTML={{ __html: post }} />;

div에 class를 추가하고, CSS 셀렉터 앞에 해당 class를 추가한다.

<div class="blog-post-content" dangerouslySetInnerHTML={{ __html: post }} />;

.blog-post-content h1 {
  @apply mb-5 text-2xl text-red-500;
}

.blog-post-content p {
  @apply mb-2 text-gray-600;
}

blog-post-content라는 class를 가진 태그 내 h1과 p에만 디자인이 적용된다.