Blog

서론#

Tailwind CSS를 사용하다 보면
클래스가 점점 길어지는 건 자연스러운 일이다.

문제는 길이가 아니라 순서였다.

<div className="bg-white p-4 text-sm rounded-md flex items-center" />

어느 날은 이렇게 쓰고,
어느 날은 이렇게 쓰게 된다.

<div className="flex items-center p-4 rounded-md bg-white text-sm" />

동작에는 아무 문제가 없지만,
코드를 볼 때마다 미묘한 찝찝함이 남았다.

이 순서를 사람이 매번 맞춰야 하는지,
아니면 아예 신경 쓰지 않아도 되는 방법이 있는지 궁금해졌다.

Tailwind 클래스 순서는 왜 신경 쓰이게 될까?#

Tailwind 클래스는
순서에 따라 의미가 달라지지 않는 경우가 대부분이다.

그래서 공식적으로도
“어떤 순서가 정답이다”라고 강제하지 않는다.

하지만 실제로 코드를 읽을 때는 이야기가 다르다.

• 레이아웃 → spacing → 색상 → 텍스트
• 혹은 텍스트 → 배경 → 간격

사람마다 자연스럽다고 느끼는 순서가 다르고,
그 차이가 코드 전체에 누적된다.

결과적으로
동작은 같지만, 읽기 어려운 코드가 된다.

사람이 정렬 규칙을 관리하는 한계#

클래스 순서를 정리하려고 마음먹으면
결국 이런 선택지에 부딪힌다.

• “이 순서로 쓰자”는 암묵적인 규칙
• 코드 리뷰에서 순서 지적
• 개인 취향에 따른 정렬

하지만 이 방식은 오래 가지 않는다.

• 규칙은 쉽게 잊힌다
• 기준이 사람마다 다르다
• 정렬 자체가 목적이 되어버린다

이쯤 되면
사람이 할 일이 아닌 문제처럼 느껴진다.

prettier-plugin-tailwindcss란?#

prettier-plugin-tailwindcss는
Tailwind 클래스의 순서를 자동으로 정렬해주는 Prettier 플러그인이다.

이 플러그인은
Tailwind 공식 권장 순서를 기준으로
클래스를 정렬해 준다.

<div className="text-sm bg-white p-4 flex rounded-md items-center" />

저장하면 다음처럼 바뀐다.

<div className="flex items-center rounded-md bg-white p-4 text-sm" />

중요한 점은
이 정렬이 사람의 취향이 아니라 도구의 규칙이라는 것이다.

이 플러그인이 해결하는 문제#

이 플러그인이 해결하는 건
“예쁘게 보이게 정렬”이 아니다.

• 클래스 순서를 고민하지 않아도 됨
• 파일마다 다른 스타일이 생기지 않음
• 리뷰에서 불필요한 논쟁 제거

즉,
정렬에 대한 판단을 코드에서 제거한다.

clsx, tw-merge와의 역할 분담#

지금까지 사용한 도구들과의 역할은 명확히 다르다.

• clsx
  • 조건에 따라 클래스를 합침
• tw-merge
  • 의미상 충돌하는 클래스를 정리
• prettier-plugin-tailwindcss
  • 남은 클래스의 순서를 통일

이 플러그인은
로직이나 의미를 건드리지 않는다.
오직 정렬만 담당한다.

그래서 앞의 도구들과 충돌하지 않고,
오히려 마지막 단계로 자연스럽게 붙는다.

언제 가장 효과적인가?#

이 플러그인은
클래스가 짧을 때보다
길어질수록 효과가 드러난다.

• 여러 유틸리티가 한 줄에 모일 때
• 조건부 클래스가 섞일 때
• cn 유틸을 통해 클래스가 합쳐질 때

이런 상황에서
“정렬을 신경 쓰지 않아도 되는 상태”를 만들어준다.

정리#

Tailwind CSS는
클래스 조합을 통해 스타일을 표현한다.

그만큼
클래스 문자열은 길어질 수밖에 없고,
순서는 쉽게 흐트러진다.

prettier-plugin-tailwindcss는
이 문제를 규칙이나 습관으로 해결하지 않는다.

대신,
아예 신경 쓰지 않게 만든다.

그래서 이 플러그인은
Tailwind를 쓰다 보면
마지막에 자연스럽게 도입하게 되는 도구라고 느꼈다.

npm 바로가기#

• prettier-plugin-tailwindcss