[prettier-plugin-tailwindcss] tailwindCss 더 잘 사용하기

Q. tailwindCss 에서 속성을 추가할 때 권장하는 순서가 있다는 것을 아셨나요?

 

문제 상황

tailwindCss를 사용하다보면, 한 엘리먼트에 대한 css 속성을 클래스명에 나열하게 됩니다. 이 때 클래스명이 한없이 길어지곤 합니다.

1. 가독성이 떨어진다.
   이는 단순히 읽기 어려운 걸 넘어서 어떤 속성을 부여했는지 일일이 파악해야 한다는 단점이 생깁니다. 특히 새로운 컴포넌트를 만들 때보다 유지보수할 때 혹은 수정이 필요할 때 순서가 잡혀있지 않은 어떤 청크를 읽는다는 것은 인지적으로 꽤나 소모가 크게 느껴집니다.
2. 상충되는 속성을 찾기 어렵다.
   따라서 상반되는 CSS 속성이 부여된다거나, 이미 앞쪽에서 부여한 속성을 뒤에서 한번더 추가하게 되는 실수가 생기기 쉽습니다.
3. 클래스명 사이에 더블 스페이스가 있어도 prettier 포맷이나 ide에서 잡기 어렵다.
   일일이 찾기에는 사소하나, 수정하지 않으면 완성도가 떨어져보이는 코드를 생산하게 됩니다.
4. 미디어 쿼리는 화면의 break point에 따라 정렬되어야 가독성이 좋아지지만, 클래스명도 길고 복잡하기 때문에 하나하나 정렬하기 번거롭습니다.

 

prettier-plugin-tailwindcss

이러한 문제를 해결하기 위해 prettier-plugin-tailwindcss 라는 플러그인을 추가할 수 있습니다.

 

https://www.npmjs.com/package/prettier-plugin-tailwindcss/v/0.0.0-insiders.d539a72

prettier-plugin-tailwindcss

https://github.com/tailwindlabs/prettier-plugin-tailwindcss#readme

GitHub - tailwindlabs/prettier-plugin-tailwindcss: A Prettier plugin for Tailwind CSS that automatically sorts classes based on

 

개발환경에 설치

npm i -D prettier prettier-plugin-tailwindcss

• package.json에 추가됩니다.

플러그인 추가

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

.prettierrc 파일 > 플러그인 배열에 prettier-plugin-tailwindcss를 추가합니다.

prettier 서식을 적용하지 않을 경로 추가

저는 백엔드에서 작성하는 타입 레포를 서브모듈로 사용하고 있기 때문에 .prettierignore 에 해당 경로를 추가해주었습니다.

// .prettierignore
src/types/**

prettier 서식 적용되는지 확인

npx prettier --check "**/*.{js,ts,jsx,tsx}" --ignore-path .prettierignore

prettier 서식 적용

npx prettier --write "**/*.{js,ts,jsx,tsx}" --ignore-path .prettierignore

---

추가적으로, 서식 적용을 보다 자주 편리하게 함으로써 일관된 코드 스타일을 적용하기 위해 package.json에 명령어를 추가해주었습니다. 따라서 이 긴 명령어를 일일이 기억해서 타이핑하지 않을 수 있게 됩니다.

// package.json
... 생략
  "scripts": {
    "start": // 기존 코드,
    "build": // 기존 코드,
	//	...
    
    "format": "prettier --write \"**/*.{js,ts,jsx,tsx}\" --ignore-path .prettierignore"
  },

장점

1. 플러그인에서 정의한 순서대로 클래스명으로 나열한 tailwindcss를 자동 정렬해주기 때문에 위에서 말한 문제를 해결합니다.
2. 따라서 자동 정렬 해준 순서에 익숙해진다면 코드 읽는 속도도 향상 시킬 수 있습니다.
3. 중복 선언이나 자잘한 타이포에 대한 휴먼 에러를 예방합니다.

단점

1. prettier 추가 설치 : 다만 prettier 를 프로젝트 내부에 설치하지 않고 ide나 로컬에만 세팅해뒀다면 이 플러그인을 사용하기 위해 함께 추가해주어야 합니다.
2. 커스텀 불가 : 자동 정렬 순서는 사용자화 할 수 없습니다. 를 들어 align-items 와 justify-content 같은 같은 계층에 속하는 속성에 대해 무조건 y축인 justify-content 가 먼저오게 하고 싶다- 는 기호가 있을 때, 이를 세팅할 방법이 없습니다.

주의사항

: order import 같은 다른 플러그인과 함께 사용할 때 plugin 배열에 추가하는 순서를 주의해야 한다. 공식 문서에서는 가장 마지막에 두라고 조언합니다.