prettier-plugin-tailwindcss 플러그인을 사용하면 TailwindCSS의 유틸리티 클래스 정렬 규칙에 따라 클래스를 자동 정렬해준다. 이전까진 Tailwind Formatter 같은 IDE 플러그인을 사용해서 정렬이 필요할 때마다 부가기능을 실행(⌃ ⇧ H)했는데 그럴 필요가 없어졌다.

prettier-plugin-tailwindcss 플러그인을 설치하고 파일 저장시 자동 포매팅 되도록 IDE를 설정하면, 유틸리티 클래스도 함께 정렬돼서 편하다.

참고로 클래스 자동 정렬 외에도 잘못 입력한 클래스 오류 표시, 축약(shorthand) 사용 강제, 임의(arbitrary) 값 사용 금지 같은 규칙이 적용된 eslint-plugin-tailwindcss ESLint 플러그인도 있다.

설정 방법

  1. prettier-plugin-tailwindcss 플러그인 설치

    yarn add -D prettier prettier-plugin-tailwindcss

  2. .prettierrc 설정 파일에 plugins 속성 추가

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

사용 방법

<aside> <img src="/icons/search_gray.svg" alt="/icons/search_gray.svg" width="40px" /> 파일 저장시 Prettier 포매팅 되도록 IDE 설정을 했다면 유틸리티 클래스도 함께 정렬된다.

</aside>

설정을 완료하고 엘리먼트를 보면 클래스 이름을 재배치 하라는 경고가 나온다.

Untitled

수정하면 recommended class order 순서대로 유틸리티 클래스가 정렬된다.

<!-- 정렬 전 -->
<Header className="flex gap-8 items-center fixed top-0 z-10 w-full">

<!-- 정렬 후 -->
<Header className="fixed top-0 z-10 flex w-full items-center gap-8">

현재 프로젝트에 있는 모든 파일을 포맷팅을 하려면 터미널에 아래 명령어를 입력한다

# 현재 폴더 위치부터 모든 파일에 대해 포매팅 됐는지 "검사"(수정하진 않음)
npx prettier --check .

# 현재 폴더 위치부터 모든 파일에 대해 "포매팅"
npx prettier --write .

# 모든 위치에 있는 js, ts, jsx, tsx 확장자에 대해 대해 "포매팅"
npx prettier --write "**/*.{js,ts,jsx,tsx}"

package.json에 스크립트 명령어를 만들어두고 사용할 수 있다.

"scripts": {
	// ...
  "format": "prettier --write '**/*.{js,jsx,ts,tsx}'"
},

Husky 설정