Tailwind CSS 자동 정렬

Tailwind CSS를 이용하여 개발을 진행하려다보니 일정한 순서로 class명을 작성하는 것이 좋을 거 같다는 말을 들었다.
관련해서 알아보니 Tailwind CSS를 자동정렬 할 수 있는 방법이 있다.

prettier-plugin-tailwindcss

Tailwind CSS용 공식 Prettier 플러그인이 있다.
이 플러그인은 Tailwind CSS 클래스를 포함하는 클래스 속성을 템플릿에서 스캔한 다음, 권장하는 클래스 순서에 따라 해당 클래스를 자동으로 정렬해준다.

사용 방법

1. plugin 설치

npm install -D prettier prettier-plugin-tailwindcss

터미널에 위 명령어를 입력하여 prettier-plugin-tailwindcss를 설치한다.

2. plugin 추가

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

루트 경로에 prettier.config.js 파일에 위 코드를 붙여넣은 후 저장한다.
만약 파일이 없을 경우 직접 만들어서 코드를 넣고 저장하면 된다.
이후 VSCode를 한 번 껐다가 켜면 정상 동작 하는 것을 확인할 수 있다.

정렬 순서

정렬 순서는 다음과 같다.

1. 기본 계층의 모든 클래스
2. 구성 요소 계층의 클래스
3. 유틸리티 계층의 클래스

유틸리티 자체는 CSS에서 정렬하는 순서와 동일하게 정렬된다.
즉, 다른 클래스를 재정의하는 클래스는 항상 클래스 목록 나중에 나타난다.

.gitignore

만약 프로젝트를 git에 올려 관리하고자 한다면, .gitignore를 이용하여 불필요한 파일 및 폴더가 git에 올라가지 않도록 관리하는 것을 권장한다.

참고 링크

• tailwindcss prettier
• github prettier-plugin-tailwindcss
• prettier-plugin-tailwindcss