Tailwind 프로젝트에서 유틸리티 클래스를 정렬하는 최선의 방법에 대해 적어도 4년 동안 논의가 이어져 왔습니다. 오늘 우리는 Tailwind CSS를 위한 공식 Prettier 플러그인을 출시함으로써 이 문제에 대한 걱정을 이제 그만둘 수 있게 되었음을 발표하게 되어 기쁩니다.
이 플러그인은 템플릿에서 Tailwind CSS 클래스를 포함하는 클래스 속성을 스캔한 후, 권장 클래스 순서에 따라 자동으로 클래스를 정렬합니다.
<!-- Before --><button class="bg-sky-700 px-4 py-2 text-white hover:bg-sky-800 sm:px-8 sm:py-3">...</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를 개발 의존성으로 설치하세요:
npm install -D prettier prettier-plugin-tailwindcss그런 다음 Prettier 설정 파일에 플러그인을 추가하세요:
{ "plugins": ["prettier-plugin-tailwindcss"]}또한 Prettier CLI와 함께 --plugin 플래그를 사용하거나 Prettier API와 함께 plugins 옵션을 사용하여 플러그인을 로드할 수 있습니다.
클래스 정렬 방식
이 플러그인의 핵심 기능은 여러분의 클래스를 Tailwind가 CSS에서 정렬하는 순서와 동일하게 정리하는 것입니다.
즉, base 레이어에 있는 클래스가 먼저 정렬되고, 그 다음 components 레이어의 클래스, 마지막으로 utilities 레이어의 클래스가 정렬됩니다.
<!-- `container`는 컴포넌트이므로 먼저 정렬됩니다 --><div class="container mx-auto px-6"> <!-- ... --></div>유틸리티 클래스들은 CSS에서 정렬하는 순서와 동일하게 정렬됩니다. 이는 다른 클래스를 오버라이드하는 클래스가 항상 클래스 목록의 뒤쪽에 위치한다는 것을 의미합니다.
<div class="p-4 pt-2"><div class="p-4 pt-2"> <!-- ... --> </div></div>실제 유틸리티의 정렬 순서는 박스 모델을 기반으로 하며, 레이아웃에 영향을 미치는 중요한 클래스를 앞쪽에 배치하고 장식적인 클래스를 뒤쪽에 배치하려고 합니다. 또한 관련된 유틸리티를 함께 유지하려고 합니다.
<div class="ml-4 flex h-24 border-2 border-gray-300 p-3 text-gray-700 shadow-md"><div class="ml-4 flex h-24 border-2 border-gray-300 p-3 text-gray-700 shadow-md"> <!-- ... --> </div></div>hover:나 focus:와 같은 수식어는 그룹화되어 일반 유틸리티 뒤에 정렬됩니다.
<div class="scale-125 opacity-50 hover:scale-150 hover:opacity-75"><div class="scale-125 opacity-50 hover:scale-150 hover:opacity-75"> <!-- ... --> </div></div>md:나 lg:와 같은 반응형 수식어는 테마에서 설정된 순서대로 끝에 그룹화됩니다. 기본적으로는 가장 작은 크기부터 가장 큰 크기 순으로 정렬됩니다.
<div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4"><div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4"> <!-- ... --> </div></div>Tailwind 플러그인에서 제공하지 않는 커스텀 클래스(예: 서드파티 라이브러리를 대상으로 하는 클래스)는 항상 앞쪽에 정렬되어 해당 클래스를 사용하는 엘리먼트를 쉽게 확인할 수 있습니다.
<div class="select2-dropdown p-3 shadow-xl"><div class="select2-dropdown p-3 shadow-xl"> <!-- ... --> </div></div>커스터마이징
Prettier가 의견을 명확히 하고 커스터마이징 옵션을 최소화하는 방식을 잘 선택했다고 생각합니다. 결국 클래스를 정렬하는 가장 큰 장점은 팀과 논쟁할 일이 하나 줄어든다는 점입니다.
우리는 이해하기 쉽고 가장 중요한 정보를 빠르게 전달할 수 있는 정렬 순서를 고민하며 노력했습니다.
이 플러그인은 여러분의 tailwind.config.js 파일을 존중하며 설치한 Tailwind 플러그인과도 잘 동작합니다. 하지만 정렬 순서를 변경할 수 있는 방법은 없습니다. Prettier와 마찬가지로, 자동 포맷팅의 장점이 스타일적 선호를 빠르게 압도할 것이며, 곧 익숙해질 것이라고 생각합니다.
한번 시도해보고 싶으신가요? GitHub에서 전체 문서를 확인해보세요 →