[Tailwind CSS] Class 자동 정렬하기

Tailwind Class 선언 위치가 뒤죽박죽

Tailwind를 사용하다 보면 Class 위치가 뒤죽박죽이 되는 어쩔 수 없는 상황이 발생합니다.
특히 급하게 코드를 작성할 때, 그렇게 되는 거 같습니다.

Class 순서의 규칙이 무너진 경우, 가독성이 좋지 않아 유지보수에 많은 힘이 들곤 합니다.

프론트엔드 개발자라면 모두가 사용하는 코드 포맷터인 Prettier에서 이를 해결할 수 있는 플러그인을 제공합니다!

Prettier Plugin Tailwind

Prettier Plugin Tailwind은 tailwind.config.js에 지정된 파일 경로를 기반으로 Tailwind CSS Class를 정렬합니다.

Prettier Plugin Tailwind 설치 방법

프로젝트 폴더에서 다음의 명령어를 입력하면 Prettier Plugin Tailwind을 설치할 수 있습니다.

npm install -D prettier prettier-plugin-tailwindcss

Prettier 설정 파일(.prettierrc)에 아래 코드를 추가해 줘야 사용할 수 있습니다.

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

Prettier Plugin Tailwind 사용 전후

//정렬 전
<div class="z-50 z-10 container  text-left md:text-center justify-center">
	...
</div>

//정렬 후
<div class="container justify-center text-left z-10 z-50 md:text-center">
	...
</div>

Prettier Plugin Tailwind가 지원하는 파일 형식

Prettier Plugin Tailwind 지원하는 파일 형식은 다음과 같습니다.

• HTML
• CSS (@apply 지시어)
• ReactJS (JSX, TSX)
• VueJS
• twin.macro

Prettier Plugin Tailwind 옵션

이 옵션들을 .prettierrc 파일에 추가하여 Tailwind CSS 클래스를 정렬하는 방식과 위치를 사용자 정의할 수 있습니다.

• twConfig - 프로젝트 루트에서 Tailwind 설정 파일의 경로를 지정합니다.
  예: "twConfig": "./tailwind.config.js"
  설명: 프로젝트의 Tailwind 설정 파일의 경로를 지정하여 해당 설정 파일을 기반으로 클래스를 정렬합니다.
• twPluginsOrder - Tailwind 플러그인을 정렬할 순서를 쉼표로 구분하여 지정합니다.
  예: "twPluginsOrder": "preflight,base,components,utilities"
  설명: Tailwind의 플러그인(예: preflight, base, components, utilities 등)을 어떤 순서로 정렬할지 지정합니다.
• twClassesPosition - 컴포넌트와 유틸리티 클래스의 위치를 지정합니다.
  예: "twClassesPosition": "before"
  설명: Tailwind의 컴포넌트 클래스와 유틸리티 클래스가 코드 내에서 어느 위치에 있을지를 지정합니다. (예: "before"는 다른 클래스들 앞에 위치시킴)
• twUnknownClassesPosition - 알 수 없는 클래스의 위치를 지정합니다.
  예: "twUnknownClassesPosition": "after"
  설명: Tailwind에서 인식하지 못하는 클래스가 코드 내에서 어디에 위치할지를 지정합니다. (예: "after"는 다른 클래스들 뒤에 위치시킴)
• twJsxClassAttributes - Tailwind 클래스를 정렬할 JSX 속성의 목록을 쉼표로 구분하여 지정합니다.
  예: "twJsxClassAttributes": "className,tw"
  설명: JSX에서 Tailwind 클래스를 정렬할 속성 이름을 지정합니다. (예: "className"과 "tw" 속성을 정렬)
• twSortFunctions - 클래스 정렬에 사용할 함수 이름의 목록을 쉼표로 구분하여 지정합니다.
  예: "twSortFunctions": "clsx,classnames"
  설명: 클래스 정렬에 사용할 함수 이름을 지정합니다. (예: "clsx"와 "classnames" 함수의 인자들을 정렬)