가이드
CSS 개념을 Tailwind 유틸리티로 변환하는 실무 가이드.
- CSS와 Tailwind 비교 — 클래식 CSS는 복잡한 선택자와 애니메이션에 강합니다. Tailwind는 시각 결정을 마크업 옆에 둡니다. 대부분 팀은 둘 다 씁니다.
- CSS 여백에서 Tailwind로 — padding: 1.5rem은 p-6. 단축형은 방향 유틸리티로. 스케일 밖은 p-[13px].
- CSS 타이포그래피에서 Tailwind로 — font-size: 1.5rem → text-2xl. font-weight: 700 → font-bold. 색상은 text-*.
- CSS Flexbox에서 Tailwind로 — display:flex → flex. flex-direction:column → flex-col. justify-content:space-between → justify-between. gap:1rem → gap-4.
- CSS Grid에서 Tailwind로 — grid-template-columns: repeat(3, 1fr) → grid-cols-3. 커스텀 트랙은 arbitrary 값.
- CSS 색상에서 Tailwind로 — 알려진 hex는 text-gray-900. 미지는 bg-[#1a2b3c].
- CSS 테두리에서 Tailwind로 — border: 1px solid → border + border-color. border-radius: 0.5rem → rounded-lg.
- 반응형 CSS에서 Tailwind로 — @media (min-width: 768px) → md:. 1024px → lg:. 복잡한 쿼리는 수동 검토.
- CSS 그림자에서 Tailwind로 — 일반 그림자 → shadow / shadow-lg. 고유 그림자 → arbitrary.
- CSS 포지셔닝에서 Tailwind로 — position:absolute → absolute. inset은 top/right/bottom/left. 커스텀 z-index는 arbitrary.
- CSS 마이그레이션 전략 — 점진 마이그레이션 권장. 신규는 Tailwind, 다음으로 핫 패스, 레거시는 교체까지 유지.