tailwindcss 클래스 정렬 플러그인

설치

npm install -D prettier prettier-plugin-tailwindcss

 

해당 플러그인은 tailwindcss 공식 Prettier 플러그인입니다.

 

클래스명을 tailwindcss가 정한 기준대로 나열해주니 한결 코드가 깔끔해지는걸 느낄 수 있습니다.

 

formatting 적용 예시

<!-- 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>

 

문서에 따르면 컴포넌트 레이어 -> 유틸리티 레이어 순으로 정렬시키고 있다고 합니다.

<!-- `container` is a component so it comes first -->
<div class="container mx-auto px-6">
  <!-- ... -->
</div>

 

margin이나 padding처럼 top bottom left right 특정 위치만 스타일을 주는 경우에, 전체적으로 스타일을 주는 margin이나 padding 뒤에 오도록 정렬합니다.

<h1 className="m-2 ml-2 p-2 pl-2"> ...

 

유틸리티 레이어들의 클래스명 정렬 순서는 박스가 하나 있다고 생각하고, 해당 클래스를 통해 박스가 레이아웃에 어느정도 영향을 끼치는지에 따라 순서를 정했다고 합니다. 

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

margin은 아무래도 박스 밖의 여백을 지정하기 때문에, 레이아웃에 큰 영향을 끼치는 요소입니다.

그렇기 때문에 가장 왼쪽에 위치해 있고, 

오른쪽으로 갈수록 box 내부에서의 레이아웃을 어떻게 영향끼치는지 생각하면 꽤 순응이 되는 것 같습니다.

 

 

hover, focus같은 가상 선택자들은 일반 스타일링 뒤에 오게 됩니다.

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

 

tailwindcss의 반응형 클래스(sm:, md: 등등)는 맨 마지막으로 정렬되고, 작은 화면에서 큰 화면 순으로 정렬 됩니다. sm -> md -> lg

<div className="grid scale-125 grid-cols-2 opacity-50 hover:opacity-75 focus:scale-150  sm:grid-cols-3 lg:grid-cols-4">

 

 

https://tailwindcss.com/blog/automatic-class-sorting-with-prettier

Automatic Class Sorting with Prettier - Tailwind CSS