Tailwind 클래스가 한 줄에 20개 넘어갈 때 하는 것들

Tailwind CSS를 쓰다 보면 어느 순간 이런 코드가 나온다.

<div className="flex flex-col items-start gap-2 px-4 py-3 rounded-xl border border-gray-200 bg-white shadow-sm hover:shadow-md transition-shadow duration-200 cursor-pointer dark:bg-gray-900 dark:border-gray-700 dark:hover:border-gray-500 text-sm text-gray-700 dark:text-gray-300 leading-relaxed">

읽기도 힘들고, 수정하다가 잘못 건드리기도 딱 좋다. 나는 이 상태가 되면 아래 기준으로 정리한다.

반복되는 조합은 컴포넌트로 빼낸다

같은 클래스 묶음이 두 군데 이상 나오면 컴포넌트로 분리할 때가 됐다는 신호다. Card, Badge, Button 같은 것들이 대표적이다. 스타일을 컴포넌트 안에 가두면 수정 지점도 하나로 줄어든다.

cn() 유틸로 조건부 클래스를 정리한다

import { clsx } from 'clsx'
import { twMerge } from 'tailwind-merge'

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

조건부 클래스를 인라인 삼항으로 처리하면 한 줄이 더 길어진다. cn()으로 빼내면 조건마다 줄을 나눌 수 있어서 눈에 잘 들어온다.

<div className={cn(
  "rounded-xl border px-4 py-3",
  isActive && "border-blue-500 bg-blue-50",
  isDisabled && "opacity-50 cursor-not-allowed"
)}>

레이아웃과 시각 스타일을 줄로 나눈다

클래스 자체를 줄바꿈하는 건 JSX 포맷터가 허용하지 않는 경우도 있어서 강제하기 어렵다. 하지만 cn()을 쓰면 자연스럽게 역할별로 묶을 수 있다. 레이아웃(flex, gap, px, py), 테두리·배경, 인터랙션(hover, transition), 다크모드 순으로 묶어두면 읽기가 편해진다.

공식 Prettier 플러그인을 쓴다

npm install -D prettier-plugin-tailwindcss

prettier.config.js에 plugins: ['prettier-plugin-tailwindcss']만 추가하면 클래스 순서를 자동으로 정렬해준다. 팀이 없어도 혼자 일관성을 유지하기 편하다.

---

클래스가 많다는 게 잘못은 아닌데, 나중에 수정하는 사람(보통 미래의 나)이 의도를 파악하기 어려워지는 게 문제다. 기준을 조금만 정해두면 그 부담이 많이 줄어든다.