가이드

• 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, 다음으로 핫 패스, 레거시는 교체까지 유지.

변환기 열기 Chrome 확장 프로그램