tailwind css - 협업을 위한 classname 정렬 plugin

tailwind css는 빠른 스타일 작업 등 많은 이점을 제공하지만, 코드 가독성이 안좋다는 치명적인 단점이 존재한다.

현재 내가 작업하고 있던 사이드 프로젝트와 회사에서 진행하는 프로젝트도 tailwind css를 사용하고 있어서 위와 같은 단점을 줄이기 위한 방편이 필요했다.

prettier-plugin-tailwindcss

tailwind 팀에서도 위와 같은 단점에 대해 초기부터 파악해서 공식적인 plugin과 설치법에 대해 설명하고 있다.

참조 사이트 : https://tailwindcss.com/blog/automatic-class-sorting-with-prettier

prettier에 해당 플러그인을 적용하면 에디터에서 자동으로 개발자가 입력한 클래스네임을 sorting해서 저장시켜 준다.

설치법

1. npm 또는 yarn 으로 플러그인 설치

npm install -D prettier-plugin-tailwindcss

yarn add -D prettier-plugin-tailwindcss

만약 prettier가 설치되어 있지 않다면 prettier도 같이 설치해준다.

ex)
npm install -D prettier prettier-plugin-tailwindcss

2. .prettierrc 파일에 해당 플러그인을 설정
prettierrc 파일에 아래와 같이 플러그인을 명시한다.
(.prettierrc.json, .prettierrc.yml, .prettierrc.yaml, or .prettierrc.json5 등)

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

3. 적용되었는지 테스트

npx prettier --write .

위 명령어로 파일을 Prettier 규칙에 따라 정리하고 포맷팅을 시도해본다.

정렬 설정하기

plugin을 설치만 하면 tailwind css팀이 추천하는 정렬 규칙에 맞춰서 클래스네임이 정렬된다.

하지만 개인의 취향이나 팀이 원하는 바에 따라 일부 설정을 달리할 수 있다.

예를 들어 whitespace를 보존 유무, 중복 클래스네임 보존 유무, 템프럴 리터럴 내부 클래스만 정렬 등등을 할 수 있다.

참조 사이트 : https://github.com/tailwindlabs/prettier-plugin-tailwindcss