Prettier로 자동 클래스 정렬하기

Tailwind 프로젝트에서 유틸리티 클래스를 정렬하는 최선의 방법에 대해 최소 4년 동안 논의가 이어져 왔습니다. 오늘 우리는 Tailwind CSS용 공식 Prettier 플러그인을 출시하며, 이제 더 이상 걱정할 필요가 없음을 알리게 되어 기쁩니다.

이 플러그인은 템플릿에서 Tailwind CSS 클래스를 포함하는 class 속성을 스캔한 후, 권장 클래스 순서에 따라 자동으로 클래스를 정렬합니다.

HTML

<!-- Before -->
<button class="text-white px-4 sm:px-8 py-2 sm:py-3 bg-sky-700 hover:bg-sky-800">...</button>

<!-- After -->
<button class="bg-sky-700 px-4 py-2 text-white hover:bg-sky-800 sm:px-8 sm:py-3">...</button>

이 플러그인은 커스텀 Tailwind 설정과도 원활하게 작동하며, Prettier 플러그인이기 때문에 Prettier가 작동하는 모든 곳에서 사용할 수 있습니다. 여기에는 모든 인기 있는 에디터와 IDE, 그리고 물론 커맨드라인도 포함됩니다.

시작하려면 prettier-plugin-tailwindcss를 개발 의존성으로 설치하세요:

Terminal

npm install -D prettier prettier-plugin-tailwindcss

그런 다음 Prettier 설정 파일에 플러그인을 추가하세요:

.prettierrc

{
  "plugins": ["prettier-plugin-tailwindcss"]
}

또한 Prettier CLI에서 --plugin 플래그를 사용하거나 Prettier API에서 plugins 옵션을 사용하여 플러그인을 로드할 수 있습니다.

클래스 정렬 방식

이 플러그인의 핵심 기능은 Tailwind가 CSS에서 클래스를 정렬하는 순서대로 여러분의 클래스를 정리하는 것입니다.

즉, 기본 레이어(base layer)에 있는 클래스가 먼저 정렬되고, 그 다음 컴포넌트 레이어(components layer)의 클래스가 정렬되며, 마지막으로 유틸리티 레이어(utilities layer)의 클래스가 정렬됩니다.

<!-- `container`는 컴포넌트이므로 먼저 정렬됩니다 -->
<div class="container mx-auto px-6">
  <!-- ... -->
</div>

유틸리티 자체도 CSS에서 정렬하는 순서와 동일하게 정렬됩니다. 이는 다른 클래스를 덮어쓰는 클래스가 항상 클래스 목록의 뒤쪽에 위치한다는 것을 의미합니다.

<div class="pt-2 p-4">
<div class="p-4 pt-2">
  <!-- ... -->
</div>

실제로 각 유틸리티의 정렬 순서는 박스 모델(box model)을 기반으로 하며, 레이아웃에 큰 영향을 미치는 클래스를 앞쪽에 배치하고 장식적인 클래스를 뒤쪽에 배치하려고 합니다. 또한 관련된 유틸리티를 함께 유지하려고 노력합니다.

<div class="text-gray-700 shadow-md p-3 border-gray-300 ml-4 h-24 flex border-2">
<div class="ml-4 flex h-24 border-2 border-gray-300 p-3 text-gray-700 shadow-md">
  <!-- ... -->
</div>

hover:나 focus:와 같은 수식어는 함께 그룹화되어 일반 유틸리티 뒤에 정렬됩니다.

<div class="hover:opacity-75 opacity-50 hover:scale-150 scale-125">
<div class="scale-125 opacity-50 hover:scale-150 hover:opacity-75">
  <!-- ... -->
</div>

md:나 lg:와 같은 반응형 수식어는 테마에서 설정된 순서대로 끝부분에 그룹화됩니다. 기본적으로는 작은 크기에서 큰 크기 순으로 정렬됩니다.

<div class="lg:grid-cols-4 grid sm:grid-cols-3 grid-cols-2">
<div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4">
  <!-- ... -->
</div>

Tailwind 플러그인에서 제공하지 않는 커스텀 클래스(예: 서드파티 라이브러리를 대상으로 하는 클래스)는 항상 앞쪽에 정렬되어, 해당 클래스를 사용하는 엘리먼트를 쉽게 확인할 수 있습니다.

<div class="p-3 shadow-xl select2-dropdown">
<div class="select2-dropdown p-3 shadow-xl">
  <!-- ... -->
</div>

커스터마이징

우리는 Prettier가 옳다고 생각합니다. Prettier는 의견이 명확하고 커스터마이징 옵션을 거의 제공하지 않습니다. 결국 클래스를 정렬하는 가장 큰 장점은 팀과 논쟁할 일이 하나 줄어든다는 점입니다.

우리는 이해하기 쉽고 가장 중요한 정보를 빠르게 전달할 수 있는 정렬 순서를 고민하며 노력했습니다.

이 플러그인은 여러분의 tailwind.config.js 파일을 존중하며 설치한 모든 Tailwind 플러그인과 함께 작동합니다. 하지만 정렬 순서를 변경할 수는 없습니다. Prettier와 마찬가지로, 자동 포맷팅의 이점이 여러분의 스타일 선호도를 빠르게 능가할 것이며, 곧 익숙해질 것이라고 생각합니다.

한번 시도해보고 싶으신가요? GitHub에서 전체 문서를 확인해보세요 →

Prettier로 자동 클래스 정렬하기

​클래스 정렬 방식

​커스터마이징

클래스 정렬 방식

커스터마이징