반응형 디자인 - Tailwind CSS

Overview

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

먼저, 문서의 <head>에 뷰포트 메타 태그를 추가했는지 확인하세요:

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

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

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

기본적으로 다섯 가지 브레이크포인트가 제공되며, 이는 일반적인 기기 해상도를 기반으로 합니다:

브레이크포인트 접두사	최소 너비	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) { ... }`

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

다음은 작은 화면에서는 세로로 쌓이고, 큰 화면에서는 나란히 배치되는 마케팅 페이지 컴포넌트의 간단한 예제입니다:

<div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden 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="Modern building architecture">
    </div>
    <div class="p-8">
      <div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold">Company retreats</div>
      <a href="#" class="block mt-1 text-lg leading-tight font-medium text-black hover:underline">Incredible accommodation for your team</a>
      <p class="mt-2 text-slate-500">Looking to take your team away on a retreat to enjoy awesome food and take in some sunshine? We have a list of places to do just that.</p>
    </div>
  </div>
</div>

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

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

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

모바일 우선 방식으로 작업하기

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

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

모바일 화면 타겟팅

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

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

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

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

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

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

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

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

특정 브레이크포인트 범위에서만 유틸리티를 적용하고 싶다면, 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) { ... }`

단일 중단점 타겟팅

단일 중단점을 타겟팅하려면, md와 같은 반응형 수정자를 다음 중단점의 max-* 수정자와 함께 사용하여 해당 중단점의 범위를 지정합니다:

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

더 자세한 내용은 중단점 범위 타겟팅을 참고하세요.

Using custom breakpoints

테마 커스터마이징

tailwind.config.js 파일에서 브레이크포인트를 완전히 커스터마이징할 수 있습니다:

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)이 필요하다면, min 또는 max 수정자를 사용해 임의의 값으로 즉석에서 커스텀 중단점을 생성할 수 있습니다.

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

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

On this page