반응형 CSS에서 Tailwind로
@media (min-width: 768px) → md:. 1024px → lg:. 복잡한 쿼리는 수동 검토.
min-width 미디어 쿼리는 Tailwind 접두사와 잘 맞아 768px은 md:, 1024px은 lg:가 됩니다. 다만 모바일 우선으로 쌓는 구조라 max-width나 범위 조건은 실제 화면에서 확인하며 다시 쓰는 편이 좋습니다.
md:와 lg: 접두사
기본 breakpoint에 맞는 media query는 md: / lg:가 됩니다. 드문 breakpoint는 메모 또는 CSS입니다.
모바일 퍼스트
Tailwind는 모바일 기준에서 위로 확장합니다. CSS가 데스크톱 퍼스트였다면 사고를 뒤집으세요.
속성 하나, 접두사 하나
Responsive 예제에서 너비를 하나씩 바꿔 어떤 메모가 나오는지 보세요.
사용해보기
.example { display: flex; gap: 1rem; padding: 1rem; }신뢰 메모: 결과를 시각적으로 확인하세요. 변환기는 초안용 도우미입니다.