DOCS/troubleshooting/250930_happybell80_tailwind_mobile_responsive.md

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

문제

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

시도한 해결책들

1차: 개별 컴포넌트 CSS 수정

• TabSection.css에 미디어 쿼리 추가
• width: 100%, overflow-x: hidden 적용
• 문제: 일시적으로 해결됐다가 다시 발생

2차: 전역 CSS 해결

• index.css에 전역 스타일 추가

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body, html {
  overflow-x: hidden !important;
  max-width: 100% !important;
}

• 문제: CSS 우선순위 충돌로 불완전한 해결

최종 해결: Tailwind CSS v3 도입

설치

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 코드로 직접 지정 ([#색상코드] 형식)