Tailwind vs CSS Modules 비교

이 포트폴리오는 CSS Modules를 사용합니다. Tailwind를 안 쓴 이유와 각각의 장단점을 비교합니다.

CSS Modules

// Button.module.css
.button {
  padding: 8px 24px;
  border-radius: 9999px;
  background: var(--text-primary);
  color: var(--bg-primary);
}

// Button.tsx
import styles from "./Button.module.css";

function Button({ children }) {
  return <button className={styles.button}>{children}</button>;
}

장점:

• 클래스명 자동 해싱 → 충돌 없음
• CSS 변수와 자연스럽게 통합
• 표준 CSS 문법 그대로

Tailwind CSS

function Button({ children }) {
  return (
    <button className="px-6 py-2 rounded-full bg-gray-900 text-white
      dark:bg-white dark:text-gray-900 hover:opacity-80 transition">
      {children}
    </button>
  );
}

장점:

• 파일 전환 없이 빠른 개발
• 일관된 디자인 시스템 강제
• 빌드 시 사용하지 않는 CSS 자동 제거

비교 테이블

이 프로젝트에서 CSS Modules를 선택한 이유

1. CSS 변수 기반 테마 — 3-layer 토큰 시스템을 CSS Variables로 이미 구축함
2. 복잡한 애니메이션 — GSAP, Framer Motion과 함께 커스텀 transition이 필요
3. 글로벌 specificity 관리 — 테마 transition과의 충돌을 compound selector로 해결해야 함
4. 1인 프로젝트 — Tailwind의 "팀 컨벤션 통일" 장점이 불필요

결론

Tailwind이 나쁜 게 아닙니다. 팀 프로젝트에서 일관된 스타일을 빠르게 적용하는 데는 Tailwind이 더 적합할 수 있습니다. 하지만 커스텀 디자인 시스템을 구축하는 포트폴리오에서는 CSS Modules가 더 유연합니다.