4. Tailwind CSS 반응형 디자인

설명

반응형 utility class 를 사용하여 반응형 사용자 인터페이스를 구축할 수 있습니다. Tailwind의 모든 utility class는 다양한 breakpoint에서 조건부로 적용될 수 있으므로 복잡한 반응형 인터페이스를 쉽게 구축할 수 있습니다.

Breakpoint 종류

중단점	최소 넓이	CSS
sm	640px	@media (min-width: 640px){ ... }
md	768px	@media (min-width: 768px){ ... }
lg	1024px	@media (min-width: 1024px) { ... }
xl	1280px	@media (min-width: 1280px) { ... }
2xl	1536px	@media (min-width: 1536px) { ... }

사용 예시

<!-- 기본 너비는 16, 중간 화면에서는 32, 대형 화면에서는 48입니다. -->
<img class="w-16 md:w-32 lg:w-48" src="...">

mobile first 방식

위 표에서 본 것처럼(@media (min-width: ...px) { ... }) 기본적으로 mobile first 디자인 방식을 제공하고 있다.

• Mobile first web design
  모바일 디바이스를 기준으로 웹사이트 또는 앱을 디자인하는 접근 방식으로 실제 @media (min-width: 640px) { ... } 같은 형식의 미디어 쿼리를 사용해 낮은 해상도 부터 높은 해상도 순으로 스타일을 구현할 수 있다.

• Desktop first web design
  데스크톱 환경을 주요 디자인 대상으로 삼는 접근 방식으로 실제 @media (max-width: 1280px) { ... } 같은 형식의 미디어 쿼리를 사용해 높은 해상도 부터 낮은 해상도 순으로 스타일을 구현할 수 있다.

사용 예시

<!-- 640px 이상의 화면에서만 텍스트를 중앙에 배치합니다. -->  
<div class="sm:text-center"></div>

<!-- 모바일에서는 텍스트를 중앙에 배치하고 640px 이상의 화면에서는 왼쪽 정렬합니다. -->
<div class="text-center sm:text-left"></div>

breakpoint 범위 설정

특정 breakpoint 범위가 활성화하려면 md와 같은 반응형 수정자를 max-* 수정자와 함께 스택하여 해당 스타일을 특정 범위로 제한할 수 있습니다.

<div class="md:max-xl:flex">  <!-- ... -->  </div>

Tailwind는 각 중단점에 해당하는 max- 수정자를 생성합니다.

수정자	미디어 쿼리
max-sm	@media not all and (min-width: 640px) { ... }
max-md	@media not all and (min-width: 768px) { ... }
max-lg	@media not all and (min-width: 1024px) { ... }
max-xl	@media not all and (min-width: 1280px) { ... }
max-2xl	@media not all and (min-width: 1536px) { ... }

사용자 정의 테마

tailwind.config.js 파일에서 breakpoint 들을 사용자 정의할 수 있습니다.

// tailwind.config.js
/** @type {import('tailwindcss').Config} */

module.exports = {
  theme: {
    screens: {
      'tablet': '640px',
      // => @media (min-width: 640px) { ... }

      'laptop': '1024px',
      // => @media (min-width: 1024px) { ... }

      'desktop': '1280px',
      // => @media (min-width: 1280px) { ... }
    },
  }
}

임시 breakpoint

임시로 breakpoint을 사용해야 하는 경우 min 또는 max 수정자를 사용하여 임의의 값을 사용하여 즉석에서 사용자 정의 breakpoint을 생성할 수 있습니다.

<div class="min-[320px]:text-center max-[600px]:bg-sky-300">  
  <!-- ... -->  
</div>

---

참고

https://tailwindcss.com/docs/responsive-design