저자가 2년간 Tailwind CSS로 반복적으로 사용하는 설정이 프로젝트의 80%를 커버한다

Context

Tailwind CSS의 방대한 유틸리티 클래스를 프로젝트마다 처음부터 다시 설정하는 비효율적인 문제가 있었다. 기본값을 대부분 유지하되 브랜드 맞춤 설정만 추가하는 단순한 접근이 필요했다.

Technical Solution

• tailwind.config.js에서 theme.extend를 사용하여 기본값을 유지하면서 커스터마이징
• 브랜드 색상(brad color)과 폰트만 정의하고 나머지는 기본값 활용
• Card, Section, Responsive text 3가지 패턴을 React 컴포넌트로 재사용
• @apply 지시어 대신 React 컴포넌트 추출 방식으로 재사용 스타일 관리
• dark mode를 class 전략으로 설정하여 OS 의존 없이 JS로 토글 가능

Impact

Tailwind와 Next.js 조합 시 빌드 타임에 미사용 클래스를 제거하여 최종 CSS 파일 크기가 15~30KB 수준으로 감소한다. 일반 WordPress 사이트의 200~500KB CSS와 비교하면 로드 성능이 크게 개선된다.