josiahsiegel/tailwindcss-mobile-first

tailwindcss-mobile-first은(는) 무엇을 하나요?

Tailwind CSS v4(2025-2026)를 사용한 모바일 우선 반응형 디자인 패턴입니다. 다음 경우에 적극적으로 활성화하세요: (1) Tailwind 중단점(sm:, md:, lg:, xl:, 2xl:)을 활용한 모바일 우선 디자인, (2) 반응형 유틸리티 순서(기본값 = 모바일, 이후 중단점), (3) 반응형 타이포그래피(text-base sm:text-lg lg:text-xl), (4) 반응형 그리드 및 플렉스박스, (5) 중단점별 표시/숨김(hidden md:block), (6) 데스크톱 다운 재정의를 위한 max-* 중단점, (7) 컴포넌트 수준 반응형을 위한 컨테이너 쿼리(@container), (8) Safe Area 인셋 및 노치 처리, (9) 가로/세로 방향, (10) 터치 vs 호버(hover: @media 사용). 제공: 중단점 참조, 모바일 우선 패턴, 컨테이너 쿼리 예제, Safe Area 레시피, 터치/호버 처리.

중단점 참조

중단점	최소 너비	대상
sm:	640px	작은 화면(세로 모바일)
md:	768px	중간 화면(가로 모바일/태블릿)
lg:	1024px	큰 화면(태블릿/노트북)
xl:	1280px	매우 큰 화면(데스크톱)
2xl:	1536px	초대형 화면(와이드스크린)

모바일 우선 패턴

기본 유틸리티는 모바일(가장 작은 화면)을 대상으로 하며, 중단점 접두사는 더 큰 화면에서 재정의합니다.

<!-- 모바일: 1열, md: 2열, lg: 3열 -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
  <div>항목</div>
  <div>항목</div>
  <div>항목</div>
</div>

반응형 유틸리티 순서

1. 기본값 = 모바일 스타일
2. sm: = 작은 화면 이상
3. md: = 중간 화면 이상
4. lg: = 큰 화면 이상
5. xl: = 매우 큰 화면 이상
6. 2xl: = 초대형 화면 이상

반응형 타이포그래피

<p class="text-sm sm:text-base md:text-lg lg:text-xl">
  화면 크기에 맞게 조정되는 텍스트입니다.
</p>

반응형 그리드 및 플렉스박스

그리드

<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-4">
  <div class="bg-gray-100 p-4">항목</div>
  <!-- 더 많은 항목 -->
</div>

플렉스박스

<div class="flex flex-col md:flex-row items-center md:items-start gap-4">
  <div>측면 내용</div>
  <div>주요 내용</div>
</div>

표시/숨김

<!-- 모바일에서는 숨김, md 이상에서 표시 -->
<div class="hidden md:block">데스크톱 전용 콘텐츠</div>

<!-- 모바일에서만 표시, md 이상에서는 숨김 -->
<div class="block md:hidden">모바일 전용 콘텐츠</div>

max-* 중단점 (데스크톱 다운 재정의)

Tailwind v4에서는 사용자 정의 CSS로 max-* 중단점을 구현할 수 있습니다.

@custom-variant max-md (@media (width <= 768px));
@custom-variant max-lg (@media (width <= 1024px));

<div class="max-md:block hidden">
  중간 화면 이하에서만 표시됩니다.
</div>

컨테이너 쿼리

<div class="@container">
  <div class="@md:grid-cols-2 @lg:grid-cols-3 grid grid-cols-1 gap-4">
    <div>항목</div>
    <div>항목</div>
    <div>항목</div>
  </div>
</div>

Safe Area 인셋 및 노치 처리

<div class="pt-[env(safe-area-inset-top)] pb-[env(safe-area-inset-bottom)] pl-[env(safe-area-inset-left)] pr-[env(safe-area-inset-right)]">
  안전한 콘텐츠 영역
</div>

가로/세로 방향

@custom-variant landscape (@media (orientation: landscape));
@custom-variant portrait (@media (orientation: portrait));

<div class="landscape:flex-row portrait:flex-col flex gap-4">
  <div>콘텐츠</div>
  <div>콘텐츠</div>
</div>

터치 vs 호버

@custom-variant touch (@media (hover: none) and (pointer: coarse));
@custom-variant hover-device (@media (hover: hover) and (pointer: fine));

<button class="hover-device:hover:bg-blue-600 touch:active:bg-blue-600 bg-blue-500 text-white px-4 py-2 rounded">
  호버 또는 터치 상호작용
</button>

추가 참고 사항

• 모든 hover: 유틸리티는 @media (hover: hover) 내부에 래핑되어야 합니다.
• max-* 중단점은 데스크톱 다운 오버라이드에 >= 대신 <= 미디어 쿼리를 사용합니다.
• 컨테이너 쿼리는 부모 컨테이너의 크기에 따라 스타일을 조정하며, 뷰포트 크기가 아닙니다.
• Safe Area 인셋은 환경 변수(env())를 지원하는 모든 브라우저에서 작동합니다.

필요한 기타 사항이 있으면 알려주세요.