Tailwind CSS 반응형 디자인

18.4.1. 브레이크포인트 전략

Tailwind CSS의 기본 브레이크포인트를 사용합니다.

접두사	최소 너비	대상 디바이스
sm:	640px	소형 태블릿
md:	768px	태블릿
lg:	1024px	소형 데스크톱
xl:	1280px	데스크톱
2xl:	1536px	대형 데스크톱

• 기본 브레이크포인트를 우선 사용해야 합니다.
• 커스텀 브레이크포인트는 기본 값으로 대응할 수 없는 경우에만 추가합니다.

// tailwind.config.ts — 커스텀 브레이크포인트 추가 예시
export default {
  theme: {
    extend: {
      screens: {
        '3xl': '1920px',
      },
    },
  },
} satisfies Config

• 커스텀 브레이크포인트는 반드시 theme.extend.screens에 추가합니다.
• 기본 브레이크포인트를 덮어쓰는 theme.screens 직접 수정은 금지합니다.

---

18.4.2. 모바일 퍼스트 원칙

기본 스타일은 모바일 화면을 기준으로 작성합니다. 브레이크포인트 접두사를 사용하여 더 넓은 화면에 스타일을 확장합니다.

<template>
  <div class="px-4 py-6 sm:px-6 md:px-8 lg:px-12">
    <h1 class="text-xl font-bold sm:text-2xl lg:text-3xl">
      페이지 제목
    </h1>
    <p class="mt-2 text-sm text-gray-600 sm:text-base lg:text-lg">
      본문 설명입니다.
    </p>
  </div>
</template>

• 접두사 없는 클래스가 모바일 기본값입니다.
• 브레이크포인트는 sm: -> md: -> lg: -> xl: -> 2xl: 순서로 확장합니다.
• max-* 변형은 사용하지 않습니다. 모바일 퍼스트 접근법으로 통일합니다.

---

18.4.3. 반응형 유틸리티 패턴

반응형 그리드

<template>
  <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
    <div
      v-for="item in items"
      :key="item.id"
      class="rounded-lg border border-gray-200 p-4"
    >
      {{ item.title }}
    </div>
  </div>
</template>

반응형 타이포그래피

요소	모바일	sm	lg
페이지 제목	text-xl	text-2xl	text-3xl
섹션 제목	text-lg	text-xl	text-2xl
본문	text-sm	text-base	text-base
캡션	text-xs	text-sm	text-sm

반응형 숨김/표시

<template>
  <nav class="flex items-center justify-between px-4 py-3">
    <!-- 모바일 전용: 햄버거 메뉴 -->
    <button class="block md:hidden" @click="openMenu">
      메뉴
    </button>

    <!-- 데스크톱 전용: 전체 내비게이션 -->
    <ul class="hidden gap-6 md:flex">
      <li v-for="link in links" :key="link.href">
        <a :href="link.href" class="text-sm font-medium text-gray-700 hover:text-brand-600">
          {{ link.label }}
        </a>
      </li>
    </ul>
  </nav>
</template>

• hidden과 block(또는 flex, grid)을 브레이크포인트별로 전환하여 요소의 표시 여부를 제어합니다.
• v-if로 DOM에서 제거하는 대신 CSS 기반 숨김을 사용하여 레이아웃 시프트를 방지합니다.

---

18.4.4. 컨테이너 설정

container 클래스를 tailwind.config.ts에서 커스터마이징합니다.

// tailwind.config.ts
export default {
  theme: {
    container: {
      center: true,
      padding: {
        DEFAULT: '1rem',
        sm: '1.5rem',
        lg: '2rem',
        xl: '2.5rem',
      },
      screens: {
        sm: '640px',
        md: '768px',
        lg: '1024px',
        xl: '1280px',
      },
    },
  },
} satisfies Config

항목	설정 값	설명
center	true	margin: 0 auto를 자동 적용합니다
padding	브레이크포인트별 지정	좌우 여백을 화면 크기에 따라 조절합니다
screens	xl: 1280px 까지	2xl 이상에서 불필요한 확장을 방지합니다

<template>
  <div class="container">
    <main>
      페이지 콘텐츠 영역
    </main>
  </div>
</template>

• container 클래스는 레이아웃 최상위 래퍼에서만 사용합니다.
• 중첩된 container 사용은 금지합니다.
• max-w-screen-xl mx-auto px-4와 같은 수동 조합 대신 설정된 container를 사용해야 합니다.