Tailwind 반복 패턴은 의미 있는 컴포넌트 계약으로 승격한다

한 화면의 구현 세부는 class 조합으로 남기고 여러 화면의 규칙은 이름 붙여 재사용한다.

1

토큰 사용

색·간격·font를 공통 theme 값에 맞춤

2

반복 관찰

같은 class 묶음이 여러 위치에 나타나는지 확인

3

컴포넌트화

Button·Card·Input처럼 의미와 variant를 API로 만듦

4

조건 조합

상태별 class를 명시적 mapping으로 관리

5

빌드 확인

사용하지 않는 CSS 제거와 동적 누락 검증

핵심클래스가 길다는 이유만으로 추출하지 말고 여러 화면이 공유하는 시각 규칙일 때 컴포넌트로 올린다.