# Tailwind CSS 도입 및 모바일 반응형 문제 해결

## 문제
- Space Times 홈페이지 모바일(375px)에서 TabSection 등 컴포넌트들이 가로로 넘침
- 사용자가 의도하지 않은 가로 스크롤 발생

## 시도한 해결책들
### 1차: 개별 컴포넌트 CSS 수정
- TabSection.css에 미디어 쿼리 추가
- width: 100%, overflow-x: hidden 적용
- 문제: 일시적으로 해결됐다가 다시 발생

### 2차: 전역 CSS 해결
- index.css에 전역 스타일 추가
```css
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body, html {
  overflow-x: hidden !important;
  max-width: 100% !important;
}
```
- 문제: CSS 우선순위 충돌로 불완전한 해결

## 최종 해결: Tailwind CSS v3 도입
### 설치
```bash
npm install -D tailwindcss@^3 autoprefixer postcss
```

### 설정 파일
- tailwind.config.js: content 경로 설정
- postcss.config.js: tailwindcss, autoprefixer 플러그인 설정
- index.css: @tailwind 디렉티브 추가

### 주요 변경사항
1. 모든 컴포넌트를 Tailwind 버전(TW suffix)으로 재작성
   - TabSection → TabSectionTW
   - ServiceCards → ServiceCardsTW
   - ContentSection → ContentSectionTW
   - Sidebar → SidebarTW
   - HeroCarousel → HeroCarouselTW
   - SearchSection → SearchSectionTW

2. CSS 파일 제거, 유틸리티 클래스로 대체
   - 반응형: sm:, md:, lg: 프리픽스 사용
   - 그리드: grid grid-cols-1 sm:grid-cols-3
   - 플렉스박스: flex flex-col sm:flex-row

### Tailwind v4 → v3 다운그레이드
- 초기 Tailwind v4 설치 시 PostCSS 플러그인 호환 문제 발생
- v3로 다운그레이드하여 안정성 확보

### SNS 버튼 브랜드 색상 적용
- 카카오톡: #FEE500 (공식 노란색)
- 인스타그램: gradient from-[#833ab4] via-[#fd1d1d] to-[#fcb045]
- 유튜브: #FF0000 (공식 빨간색)

## 결과
- 375px 모바일 화면에서 가로 스크롤 완전 제거
- 모든 컴포넌트가 뷰포트 내에 정상 표시
- 깔끔한 유틸리티 클래스 기반 스타일링

## 교훈
- CSS 충돌 문제는 근본적인 해결책(Tailwind 같은 유틸리티 프레임워크)이 효과적
- Tailwind v4는 아직 불안정, 프로덕션은 v3 사용 권장
- 브랜드 색상은 hex 코드로 직접 지정 ([#색상코드] 형식)