Tailwind 3년 운영, 유지보수가 무너지지 않는 규칙

Tailwind는 시작이 빠른 만큼 방치하면 클래스 수프가 된다. 3년 운영하면서 코드베이스가 무너지지 않게 지켜 준 규칙들이다.

1. 디자인 토큰을 theme에 박아라

// tailwind.config.ts
theme: {
  extend: {
    colors: {
      ink: "#1a1815",
      acc: "#e0533d",
      "acc-soft": "#fbeae6",
      line: "#e8e4de",
    },
  },
}

text-[#e0533d] 같은 arbitrary 색상이 코드에 3번 이상 등장하면 토큰 승격 대상이다. 색을 바꾸는 리브랜딩이 config 한 줄이 되느냐, 전역 찾아바꾸기가 되느냐의 차이다.

2. 반복 3회 = 컴포넌트화

@apply로 CSS 클래스를 만드는 것보다 React 컴포넌트로 묶는 게 낫다. @apply는 "Tailwind로 쓰는 CSS"라서 두 세계의 단점만 모은다. Button, Card, TagChip처럼 시각 단위로 컴포넌트를 만들면 클래스 중복이 자연히 사라진다.

3. 클래스 순서는 도구에 맡겨라

prettier-plugin-tailwindcss 하나 넣으면 순서 논쟁이 끝난다. 사람이 정렬 규칙을 기억하게 하지 말자.

4. 조건부 클래스는 문자열 조립 금지

// 탐지 불가능한 버그의 온상
className={"text-" + (error ? "red" : "green") + "-500"}

// 전체 클래스명이 소스에 있어야 purge가 산다
className={error ? "text-red-500" : "text-green-500"}

Tailwind는 소스에서 완전한 클래스 문자열을 찾아 CSS를 생성한다. 동적 조립은 프로덕션 빌드에서 스타일이 증발하는 클래식한 사고다.

5. arbitrary value는 예외로 남겨라

w-[137px]가 필요할 때는 있다. 하지만 그게 기본이 되면 Tailwind를 쓰는 의미(제약된 스케일)가 사라진다. PR 리뷰에서 arbitrary가 눈에 띄게 많으면 디자인 시스템과 대화할 시점이다.