Tailwind CSS 실전

# Tailwind CSS 실전 가이드

## 학습 목표
유틸리티 우선 CSS 프레임워크인 Tailwind CSS를 마스터합니다.

## 1. Tailwind란?
유틸리티 클래스를 조합해 디자인하는 CSS 프레임워크입니다.
- 빠른 개발 속도
- 일관된 디자인 시스템
- 커스터마이징 용이
- 작은 프로덕션 빌드 크기

## 2. 설치
npm install -D tailwindcss
npx tailwindcss init

# tailwind.config.js
module.exports = {
content: ["./src/**/*.{html,js,jsx,ts,tsx}"],
theme: { extend: {} },
plugins: [],
}

# CSS 파일에 추가
@tailwind base;
@tailwind components;
@tailwind utilities;

## 3. 기본 유틸리티
# 여백 (Spacing)
p-4 # padding: 1rem
m-2 # margin: 0.5rem
px-6 # padding-left/right: 1.5rem
my-auto # margin-top/bottom: auto
space-x-4 # 자식 요소 간 간격

# 크기 (Sizing)
w-full # width: 100%
w-1/2 # width: 50%
h-screen # height: 100vh
max-w-md # max-width: 28rem
min-h-0 # min-height: 0

## 4. 타이포그래피
text-sm # font-size: 0.875rem
text-lg # font-size: 1.125rem
text-2xl # font-size: 1.5rem
font-bold # font-weight: 700
font-medium # font-weight: 500
leading-tight # line-height: 1.25
tracking-wide # letter-spacing: 0.025em
text-center # text-align: center

## 5. 색상
text-gray-500 # 텍스트 색상
bg-blue-500 # 배경색
border-red-300 # 테두리 색상
text-white # 흰색 텍스트
bg-gradient-to-r from-purple-500 to-pink-500

# 투명도
bg-black/50 # 50% 투명도
text-white/80 # 80% 투명도

## 6. Flexbox
flex # display: flex
flex-col # flex-direction: column
items-center # align-items: center
justify-between # justify-content: space-between
gap-4 # gap: 1rem
flex-wrap # flex-wrap: wrap
flex-1 # flex: 1 1 0%

# 예시
<div class="flex items-center justify-between gap-4">
<div>Left</div>
<div>Right</div>
</div>

## 7. Grid
grid # display: grid
grid-cols-3 # 3열 그리드
grid-cols-12 # 12열 그리드
col-span-2 # 2칸 차지
gap-6 # gap: 1.5rem
grid-rows-2 # 2행 그리드

# 예시
<div class="grid grid-cols-3 gap-4">
<div>1</div>
<div class="col-span-2">2-3</div>
</div>

## 8. 반응형 디자인
# 브레이크포인트
sm: 640px
md: 768px
lg: 1024px
xl: 1280px
2xl: 1536px

# 사용법 (모바일 우선)
<div class="w-full md:w-1/2 lg:w-1/3">
모바일: 100%, 태블릿: 50%, 데스크탑: 33%
</div>

<div class="flex flex-col md:flex-row">
모바일: 세로, 태블릿+: 가로
</div>

## 9. 다크모드
# tailwind.config.js
module.exports = {
darkMode: "class", // 또는 "media"
}

# 사용
<div class="bg-white dark:bg-gray-900">
<p class="text-gray-900 dark:text-white">Hello</p>
</div>

# 토글
document.documentElement.classList.toggle("dark")

## 10. 상태 변형
hover:bg-blue-600 # 마우스 오버
focus:outline-none # 포커스
active:scale-95 # 클릭 시
disabled:opacity-50 # 비활성화
group-hover: # 그룹 호버

# 예시
<button class="bg-blue-500 hover:bg-blue-600 active:scale-95 transition">
Click me
</button>

## 11. 애니메이션
transition # 기본 트랜지션
duration-300 # 0.3초
ease-in-out # 이징
transform # transform 활성화
hover:scale-105 # 확대
animate-spin # 회전 애니메이션
animate-pulse # 펄스 애니메이션
animate-bounce # 바운스

## 12. 커스터마이징
# tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
primary: "#6366f1",
secondary: "#ec4899",
},
fontFamily: {
sans: ["Pretendard", "sans-serif"],
},
spacing: {
128: "32rem",
},
},
},
}

## 추천 학습 순서
1. 기본 유틸리티 익히기
2. Flexbox/Grid 레이아웃
3. 반응형 디자인
4. 다크모드 구현
5. 컴포넌트 패턴 만들기