#Tailwind CSS 가독성 챙기기

Tailwind CSS는 utility-first CSS framework로 뛰어난 생산성을 가져다주기에 꾸준히 사랑받고 있는 라이브러리입니다.

HTML에 유틸리티 클래스를 지정하는 것만으로 빠른 생산성을 가질 수 있다는 점에서 CSS 프레임워크에 새로운 패러다임을 제공했습니다. 최근 인기 있는 shadcn ui와 같은 UI 라이브러리들도 Tailwind CSS를 기반으로 사용합니다.

하지만 Tailwind CSS의 호불호가 갈리는 이유는 바로 가독성입니다.

Tailwind CSS를 사용하면 수많은 유틸리티 클래스가 선언되어 해당 요소가 무엇을 표현하고 있는지 파악하기 어려워질 수 있습니다.

해당 문제점은 Tailwind CSS 커뮤니티가 해결하고자 하는 문제점이기도 하고, 커뮤니티가 성장함에 따라 여러 해결 방안을 찾을 수 있었습니다.

#1. 유틸리티 클래스 Shorthand 사용하기

유틸리티 클래스 중 어떤 유틸리티 클래스들은 같이 사용하는 경우가 많습니다. Tailwind에서는 연관된 유틸리티 클래스명을 결합하여 제공합니다. 결합된 유틸리티 클래스를 활용하여 선언된 유틸리티를 줄여봅시다.

#너비 높이를 위한 size-

요소의 너비와 높이를 지정하려면 w-4 h-4와 같이 두 개의 유틸리티를 사용해야 합니다. 이는 size-4로 축약 가능합니다.

<!-- 기존 코드 -->
<div class="w-4 h-4 bg-blue-500"></div>
 
<!-- Shorthand 사용 -->
<div class="size-4 bg-blue-500"></div>

#색상과 불투명도를 위한 text-/

요소의 배경이나 텍스트의 색상, 불투명도를 지정하려면 bg-black bg-opacity-70과 text-black text-opacity-70개의 유틸리티를 사용해야 합니다. 이는 bg-black/70과 text-black/70으로 축약 가능합니다.

<!-- 기존 코드 -->
<div class="bg-black bg-opacity-70 text-black text-opacity-70">
  텍스트 내용
</div>
 
<!-- Shorthand 사용 -->
<div class="bg-black/70 text-black/70">
  텍스트 내용
</div>

#글꼴 크기와 줄 높이를 위한 font-

요소의 글꼴 크기와 줄 높이를 지정하려면 font-base leading-6과 같이 두 개의 유틸리티를 사용해야 합니다. 이는 font-base/6로 축약 가능합니다.

<!-- 기존 코드 -->
<p class="font-base leading-6">
  텍스트 내용
</p>
 
<!-- Shorthand 사용 -->
<p class="font-base/6">
  텍스트 내용
</p>

(이를 eslint에서 방지할 수 있도록 enforces-shorthand rule이 있습니다.]

#::before ::after 가상요소에 지정 시 content-[''] 생략하기

단순 스타일을 위해 ::before ::after 가상요소를 사용했다면 content-['']를 선언하지 않아도 Tailwind CSS에서 자동으로 추가가 됩니다. 이는 preflight가 활성화 된 경우 기본적으로 적용되므로, 다른 값을 원하는 경우에만 사용하는 것이 좋습니다.

<!-- 기존 코드 -->
<div class="before:content-[''] before:block before:bg-red-500">
  내용
</div>
 
<!-- content-[''] 생략 -->
<div class="before:block before:bg-red-500">
  내용
</div>

#2. 가상 요소 대신 HTML 요소에 스타일 지정하기

::before ::after 가상요소를 before: after: 로 스타일을 지정할 수 있습니다. 하지만 Tailwind CSS에서 가상요소에 적용되는 스타일이 많아질수록 클래스명이 매우 길어질 수 있습니다.

<blockquote class="text-2xl font-semibold italic text-center text-slate-900">
  When you look
  <span class="before:block before:absolute before:-inset-1 before:-skew-y-3 before:bg-pink-500 relative inline-block">
    <span class="relative text-white">annoyed</span>
  </span>
  all the time, people think that you're busy.
</blockquote>

이럴 땐 span이나 div 요소를 사용하는 것이 더욱 읽기 쉬우며, 작성하는 코드도 적어집니다.

<blockquote class="text-2xl font-semibold italic text-center text-slate-900">
  When you look
  <span class="relative">
    <span class="block absolute -inset-1 -skew-y-3 bg-pink-500" aria-hidden="true"></span>
    <span class="relative text-white">annoyed</span>
  </span>
  all the time, people think that you're busy.
</blockquote>

#3. Tailwind Fold

Tailwind Fold는 VS Code의 익스텐션으로 HTML 태그의 긴 클래스명을 자동으로 접도록 해줍니다. Tailwind CSS 가독성 문제를 간접적으로 해결할 수 있는 방법이기에 소개합니다.