반응형 디자인

반응형 유틸리티 변형을 사용하여 적응형 사용자 인터페이스를 구축하는 방법.

개요

Tailwind의 모든 유틸리티 클래스는 다양한 브레이크포인트에서 조건부로 적용할 수 있습니다. 이 기능 덕분에 HTML을 벗어나지 않고도 복잡한 반응형 인터페이스를 쉽게 구축할 수 있습니다.

먼저, 문서의 <head>에 뷰포트 메타 태그를 추가해야 합니다:

index.html

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

그런 다음 특정 브레이크포인트에서만 유틸리티가 적용되도록 하려면, 유틸리티 앞에 브레이크포인트 이름과 : 문자를 붙이면 됩니다:

HTML

<!-- 기본적으로 너비는 16, 중간 화면에서는 32, 큰 화면에서는 48 --><img class="w-16 md:w-32 lg:w-48" src="..." />

기본적으로 일반적인 디바이스 해상도를 기준으로 다섯 가지 브레이크포인트가 제공됩니다:

브레이크포인트 접두사	최소 너비	CSS
`sm`	40rem (640px)	`@media (width >= 40rem) { ... }`
`md`	48rem (768px)	`@media (width >= 48rem) { ... }`
`lg`	64rem (1024px)	`@media (width >= 64rem) { ... }`
`xl`	80rem (1280px)	`@media (width >= 80rem) { ... }`
`2xl`	96rem (1536px)	`@media (width >= 96rem) { ... }`

이 기능은 프레임워크의 모든 유틸리티 클래스에 적용됩니다. 즉, 특정 브레이크포인트에서 글자 간격이나 커서 스타일과 같은 것도 변경할 수 있습니다.

다음은 작은 화면에서는 세로로 쌓인 레이아웃을, 큰 화면에서는 나란히 배치된 레이아웃을 사용하는 마케팅 페이지 컴포넌트의 간단한 예제입니다:

<div class="mx-auto max-w-md overflow-hidden rounded-xl bg-white shadow-md md:max-w-2xl">  <div class="md:flex">    <div class="md:shrink-0">      <img        class="h-48 w-full object-cover md:h-full md:w-48"        src="/img/building.jpg"        alt="현대 건축물"      />    </div>    <div class="p-8">      <div class="text-sm font-semibold tracking-wide text-indigo-500 uppercase">회사 워크숍</div>      <a href="#" class="mt-1 block text-lg leading-tight font-medium text-black hover:underline">        팀을 위한 멋진 숙소      </a>      <p class="mt-2 text-gray-500">        팀과 함께 워크숍을 떠나 맛있는 음식과 햇살을 즐기고 싶으신가요? 우리는 그런 장소 목록을 제공합니다.      </p>    </div>  </div></div>

위 예제가 어떻게 동작하는지 설명하겠습니다:

기본적으로 외부 div는 display: block이지만, md:flex 유틸리티를 추가하면 중간 화면 이상에서 display: flex로 변경됩니다.
부모가 플렉스 컨테이너일 때 이미지가 줄어들지 않도록 하기 위해 md:shrink-0을 추가했습니다. 기술적으로는 shrink-0만 사용해도 작은 화면에서는 아무런 영향을 미치지 않지만, md 화면에서만 중요한 사항이므로 클래스 이름에 명확히 표시하는 것이 좋습니다.
작은 화면에서는 이미지가 기본적으로 전체 너비를 차지합니다. 중간 화면 이상에서는 너비를 고정 크기로 제한하고 md:h-full md:w-48을 사용해 이미지가 전체 높이를 차지하도록 했습니다.

이 예제에서는 하나의 브레이크포인트만 사용했지만, sm, lg, xl, 2xl과 같은 반응형 접두사를 사용해 다른 크기에서도 이 컴포넌트를 쉽게 커스터마이징할 수 있습니다.

모바일 퍼스트 방식으로 작업하기

Tailwind는 Bootstrap과 같은 다른 프레임워크에서 익숙할 수 있는 모바일 퍼스트 방식의 브레이크포인트 시스템을 사용합니다.

이것은 접두사가 없는 유틸리티(예: uppercase)는 모든 화면 크기에서 적용되지만, 접두사가 붙은 유틸리티(예: md:uppercase)는 지정된 브레이크포인트 _이상_에서만 적용된다는 것을 의미합니다.

모바일 화면 타겟팅

이 접근 방식이 사람들을 가장 놀라게 하는 부분은 모바일 스타일을 적용할 때 sm: 접두사가 붙은 유틸리티가 아니라, 접두사가 없는 기본 버전을 사용해야 한다는 점입니다. sm:을 "작은 화면에서"라고 생각하지 말고, "작은 브레이크포인트에서"라고 생각하세요.

모바일 기기를 타겟팅할 때 sm:을 사용하지 마세요

HTML

<!-- 이 코드는 640px 이상의 화면에서만 텍스트를 가운데 정렬하며, 작은 화면에서는 적용되지 않습니다 --><div class="sm:text-center"></div>

모바일을 타겟팅할 때는 접두사가 없는 유틸리티를 사용하고, 더 큰 브레이크포인트에서 이를 재정의하세요

HTML

<!-- 이 코드는 모바일에서 텍스트를 가운데 정렬하고, 640px 이상의 화면에서는 왼쪽 정렬합니다 --><div class="text-center sm:text-left"></div>

이러한 이유로, 디자인을 구현할 때 먼저 모바일 레이아웃을 작업한 다음, sm 화면에 적합한 변경 사항을 추가하고, 그 다음 md 화면 등을 순차적으로 적용하는 것이 좋습니다.

특정 브레이크포인트 범위 타겟팅

기본적으로 md:flex와 같은 규칙으로 적용된 스타일은 해당 브레이크포인트에서 적용되며, 더 큰 브레이크포인트에서도 계속 적용됩니다.

특정 브레이크포인트 범위에서만 유틸리티를 적용하고 싶다면, md와 같은 반응형 변형과 max-* 변형을 함께 사용하여 스타일을 특정 범위로 제한할 수 있습니다:

HTML

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

Tailwind는 각 브레이크포인트에 대해 해당하는 max-* 변형을 생성하므로, 기본적으로 다음과 같은 변형을 사용할 수 있습니다:

변형	미디어 쿼리
`max-sm`	`@media (width < 40rem) { ... }`
`max-md`	`@media (width < 48rem) { ... }`
`max-lg`	`@media (width < 64rem) { ... }`
`max-xl`	`@media (width < 80rem) { ... }`
`max-2xl`	`@media (width < 96rem) { ... }`

단일 브레이크포인트 타겟팅

단일 브레이크포인트를 타겟팅하려면, md와 같은 반응형 변형과 다음 브레이크포인트의 max-* 변형을 함께 사용하여 해당 브레이크포인트의 범위를 지정할 수 있습니다.

HTML

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

더 자세한 내용은 브레이크포인트 범위 타겟팅을 참고하세요.

커스텀 중단점 사용하기

테마 커스터마이징

--breakpoint-* 테마 변수를 사용하여 중단점을 커스터마이징할 수 있습니다:

app.css

@import "tailwindcss";@theme {  --breakpoint-xs: 30rem;  --breakpoint-2xl: 100rem;  --breakpoint-3xl: 120rem;}

이 설정은 기본값인 96rem 대신 2xl 중단점을 100rem으로 업데이트하고, 새로운 xs와 3xl 중단점을 생성합니다. 이 중단점들은 마크업에서 사용할 수 있습니다:

HTML

<div class="grid xs:grid-cols-2 3xl:grid-cols-6">  <!-- ... --></div>

테마 커스터마이징에 대해 더 알아보려면 테마 문서를 참고하세요.

기본 브레이크포인트 제거하기

기본 브레이크포인트를 제거하려면 해당 값을 initial 키워드로 재설정합니다:

app.css

@import "tailwindcss";@theme {  --breakpoint-2xl: initial;}

또한 --breakpoint-*: initial을 사용해 모든 기본 브레이크포인트를 재설정한 후, 처음부터 모든 브레이크포인트를 정의할 수도 있습니다:

app.css

@import "tailwindcss";@theme {  --breakpoint-*: initial;  --breakpoint-tablet: 40rem;  --breakpoint-laptop: 64rem;  --breakpoint-desktop: 80rem;}

기본 테마 값 제거에 대해 더 알아보려면 테마 문서를 참고하세요.

임의 값 사용하기

테마에 포함하기에는 적합하지 않은 일회성 브레이크포인트가 필요하다면, min 또는 max 변형을 사용하여 임의의 값으로 즉석에서 커스텀 브레이크포인트를 생성할 수 있습니다.

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

임의 값 지원에 대해 더 알아보려면 임의 값 문서를 참고하세요.

컨테이너 쿼리

컨테이너 쿼리란?

컨테이너 쿼리는 뷰포트 전체 크기가 아닌 부모 엘리먼트의 크기에 따라 스타일을 적용할 수 있는 모던 CSS 기능입니다. 이 기능을 사용하면 컴포넌트가 실제로 사용 가능한 공간에 따라 스타일을 변경할 수 있어 훨씬 더 이식성과 재사용성이 높은 컴포넌트를 만들 수 있습니다.

기본 예제

@container 클래스를 사용해 엘리먼트를 컨테이너로 표시한 후, @sm이나 @md 같은 변형 클래스를 사용해 컨테이너 크기에 따라 자식 엘리먼트를 스타일링할 수 있습니다:

HTML

<div class="@container">  <div class="flex flex-col @md:flex-row">    <!-- ... -->  </div></div>

브레이크포인트 변형 클래스와 마찬가지로, Tailwind CSS에서 컨테이너 쿼리는 모바일 우선 방식으로 동작하며, 대상 컨테이너 크기 이상에서 적용됩니다.

최대 너비 컨테이너 쿼리

특정 컨테이너 크기 이하에서 스타일을 적용하려면 @max-sm 및 @max-md와 같은 변형을 사용하세요:

HTML

<div class="@container">  <div class="flex flex-row @max-md:flex-col">    <!-- ... -->  </div></div>

컨테이너 쿼리 범위

특정 범위를 타겟팅하기 위해 일반 컨테이너 쿼리 변형과 최대 너비 컨테이너 쿼리 변형을 함께 사용할 수 있습니다:

HTML

<div class="@container">  <div class="flex flex-row @sm:@max-md:flex-col">    <!-- ... -->  </div></div>

이름이 지정된 컨테이너

여러 중첩된 컨테이너를 사용하는 복잡한 디자인에서 @container/{name}을 사용해 컨테이너에 이름을 지정할 수 있습니다. 그리고 @sm/{name}이나 @md/{name}과 같은 변형을 사용해 특정 컨테이너를 대상으로 스타일을 적용할 수 있습니다.

HTML

<div class="@container/main">  <!-- ... -->  <div class="flex flex-row @sm/main:flex-col">    <!-- ... -->  </div></div>

이렇게 하면 가장 가까운 컨테이너가 아닌, 멀리 떨어진 컨테이너의 크기를 기준으로 스타일을 적용할 수 있습니다.

커스텀 컨테이너 크기 사용하기

컨테이너 크기를 커스터마이징하려면 --container-* 테마 변수를 사용하세요:

app.css

@import "tailwindcss";@theme {  --container-8xl: 96rem;}

이렇게 하면 마크업에서 사용할 수 있는 새로운 8xl 컨테이너 쿼리 변형이 추가됩니다:

HTML

<div class="@container">  <div class="flex flex-col @8xl:flex-row">    <!-- ... -->  </div></div>

테마 커스터마이징에 대해 더 알아보려면 테마 문서를 참고하세요.

임의의 값 사용하기

테마에 추가하지 않고 일회성으로 사용할 컨테이너 쿼리 크기를 위해 @min-[475px] 및 @max-[960px]와 같은 변형을 사용하세요:

HTML

<div class="@container">  <div class="flex flex-col @min-[475px]:flex-row">    <!-- ... -->  </div></div>

컨테이너 쿼리 단위 사용하기

다른 유틸리티 클래스에서 컨테이너 크기를 참조하기 위해 cqw와 같은 컨테이너 쿼리 길이 단위를 임의의 값으로 사용할 수 있습니다:

HTML

<div class="@container">  <div class="w-[50cqw]">    <!-- ... -->  </div></div>

컨테이너 크기 참조

기본적으로 Tailwind는 16rem _(256px)_부터 80rem _(1280px)_까지의 컨테이너 크기를 제공합니다:

변형	최소 너비	CSS
`@3xs`	16rem (256px)	`@container (width >= 16rem) { … }`
`@2xs`	18rem (288px)	`@container (width >= 18rem) { … }`
`@xs`	20rem (320px)	`@container (width >= 20rem) { … }`
`@sm`	24rem (384px)	`@container (width >= 24rem) { … }`
`@md`	28rem (448px)	`@container (width >= 28rem) { … }`
`@lg`	32rem (512px)	`@container (width >= 32rem) { … }`
`@xl`	36rem (576px)	`@container (width >= 36rem) { … }`
`@2xl`	42rem (672px)	`@container (width >= 42rem) { … }`
`@3xl`	48rem (768px)	`@container (width >= 48rem) { … }`
`@4xl`	56rem (896px)	`@container (width >= 56rem) { … }`
`@5xl`	64rem (1024px)	`@container (width >= 64rem) { … }`
`@6xl`	72rem (1152px)	`@container (width >= 72rem) { … }`
`@7xl`	80rem (1280px)	`@container (width >= 80rem) { … }`

On this page