팀원끼리 테일윈드 배치가 다 다를때 지저분함을 통일시키는 법

React로 프로젝트를 하다 보면 Prettier로 코드 포맷을 맞추고, Tailwind CSS로 스타일을 작성하게 됩니다. 두 도구를 그냥 쓰면 className 안에 나열한 Tailwind 클래스 순서가 제각각이라, 저장할 때마다 Prettier가 순서를 바꿔서 의미 없는 diff가 많이 생깁니다.

Prettier와 Tailwind를 같이 쓰면서, Tailwind 권장 순서로 클래스를 자동 정렬하는 설정을 정리해 봤습니다.

ESM 프로젝트에서 Prettier 설정 파일을 둘 때 겪을 수 있는 문제와 해결 방법도 포함했습니다.

---

Prettier는 코드 정리 도구보다 프로젝트 내부의 표현 방식 통일로 이해하자.

Prettier는 보통 “들여쓰기/따옴표/세미콜론 같은 코드 정리 도구”로만 생각하기 쉬운데, 실제로는 프로젝트 안의

표현 방식 을 통일해주는 도구에 가깝습니다.

특히 Tailwind를 쓰면 스타일이 CSS 파일로 분리되는 게 아니라 문자열 안에 쌓이기 때문에, 스타일도 결국

리뷰하고 diff에 찍히는 변경이 무수히 많아지며, 가독성이 굉장히 떨어집니다.

그래서 Prettier를 “코드 정리”뿐 아니라 스타일 표현(className) 정리까지 맡기는 순간, 팀 전체에서 의미 없는 변경(diff)이 확 줄고 리뷰가 훨씬 편해집니다.

테일윈드의 가독성이 안좋은 단점을 조금 보완하는 역할도 하겠습니다.

알다시피 테일윈드는 .. className에 유틸리티 클래스를 나열하는데, 작성 순서가 사람마다·파일마다 다릅니다.

Prettier만 쓰면 className 문자열은 “그냥 문자열”이라서, 공백·줄바꿈만 맞추고 클래스 나열 순서는 건드리지 않습니다.

반대로 prettier-plugin-tailwindcss를 쓰면 Prettier가 Tailwind 문서에서 권장하는 순서로 클래스를 재정렬해 줍니다.

그래서 “Prettier로 포맷 + Tailwind 클래스 순서 통일”을 한 번에 하는 방식이 권장됩니다.

---

어떻게 활용할까?

당연히 npm 패키지 설치

npm install -D prettier prettier-plugin-tailwindcss

(이미 Prettier가 있다면 플러그인만 추가하면 됩니다.)

Prettier 설정 파일에서 주의점

우리 프로젝트는 Vite + React이고, package.json에 "type": "module"이 있어서 .js 파일이 ESM으로 해석됩니다.

package.json에 "type": "module"이 있으면, 확장자가 .js인 파일은 기본적으로 전부 ESM으로 해석됩니다.

그래서 Prettier 설정 파일을 prettier.config.js로 두고 안에 CommonJS 문법인 module.exports = { ... }를 쓰면, Node가 그 파일을 ESM으로 로드하려다가 이런 에러가 납니다.

• ReferenceError: module is not defined in ES module scope

즉, ESM 프로젝트라서 module.exports가 막히는 상황이 생기는 거고요.

그럼 .cjs는 뭐냐

.cjs는 Node가 “이 파일만큼은 무조건 CommonJS로 읽어라”라고 강제하는 확장자입니다.

그래서 프로젝트 전체가 ESM이어도("type": "module"), Prettier 설정 파일만 따로 CommonJS로 유지할 수 있는 겁니다.

• prettier.config.cjs → CommonJS로 확정
• 내용은 그대로 module.exports = { ... } 사용 가능

그래서 Prettier 설정은 CommonJS 전용 확장자인 prettier.config.cjs로 두었습니다.

prettier.config.cjs

module.exports = {
  printWidth: 100,
  tabWidth: 2,
  trailingComma: 'all',
  singleQuote: true,
  jsxSingleQuote: true,
  semi: true,
  plugins: ['prettier-plugin-tailwindcss'],
};

plugins: ['prettier-plugin-tailwindcss'] 한 줄이 Tailwind 클래스 정렬을 담당합니다.

나머지는 팀에서 쓰는 기본 포맷 규칙(한 줄 길이, 따옴표, 세미콜론 등)입니다.

---

실제로 어떻게 바뀌나요?

플러그인이 붙으면, 저장(또는 포맷 실행) 시 Tailwind 권장 순서로 클래스가 재정렬됩니다.

Before

className={`inline-flex items-center h-10 px-3 rounded-lg hover:bg-white/10 ${className}`}

After (Prettier + prettier-plugin-tailwindcss)

className={`inline-flex h-10 items-center rounded-lg px-3 hover:bg-white/10 ${className}`}

레이아웃 → 크기 → 정렬 → 간격 → 배경/테두리 → 인터랙션 순으로 맞춰 주는 식이라, 동작은 같고 순서만 통일됩니다. 덕분에 diff에서 “클래스 순서만 바뀐 변경”이 자주 보이게 됩니다.

---

포맷 스크립트와 lint-staged로 습관화하기

의미 없는 “클래스 재정렬만 있는 diff”를 줄이려면, 커밋 전에 한 번 전체 포맷을 돌려 두는 게 좋습니다.

package.json

{
  "scripts": {
    "format": "prettier --write ."
  }
}

그리고 lint-staged로 커밋 시점에 자동으로 Prettier를 돌리면, 스테이징된 파일만 포맷되어 커밋에 포함됩니다.

{
  "lint-staged": {
    "*.{ts,tsx,js,jsx,json,css,md}": [
      "prettier --write",
      "eslint --fix"
    ]
  }
}

적용하고 나서 팀원들에게 전해주오

1. 새로 브랜치를 받았을 때: 한 번 npm run format 실행 후 작업하면, 이후 커밋에서 “클래스만 정렬”된 변경이 덜 생깁니다.
2. PR 리뷰 시: “클래스 순서만 바뀐 diff”는 Prettier + Tailwind 플러그인 때문이라고 팀에 공유해 두면 이해하기 쉽습니다.