Tailwind - 반응형 디자인

 

Tailwind - 반응형 디자인

#Web/CSS

Tailwind CSS는 미디어 쿼리를 사용하지 않고, 미리 정의된 브레이크포인트 유틸리티를 통해 반응형 디자인을 구현할 수 있다.

브레이크포인트

뷰포트 메타 태그

Tailwind의 반응형 유틸리티를 사용하기 전에, 반드시태그를 HTML 문서의섹션에 추가해야 한다.

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

브라우저가 페이지의 크기를 기기 화면 크기에 맞게 조정하도록 지시하는 것이다.

ex) 배경색 변경

<div class="bg-blue-500 md:bg-red-500 lg:bg-green-500">
  이 박스는 화면 크기에 따라 배경색이 바뀝니다.
</div>

ex) 이미지 크기 변경

<!-- 기본적으로 폭은 16, 중간 크기 화면에서 32, 큰 화면에서 48로 변경 -->
<img class="w-16 md:w-32 lg:w-48" src="https://via.placeholder.com/300" alt="placeholder image">

ex) 배치 바꾸기

<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="https://via.placeholder.com/300"
        alt="Modern building"
      />

설명

• 기본적으로 div는 block 레이아웃을 따르며, md:flex 클래스를 통해 화면 크기가 중간 이상일 때 flex 레이아웃으로 변환된다
• 이미지와 콘텐츠는 모바일 화면에서는 각각 쌓이고, 중간 크기 이상에서는 좌우로 배치됩니다(md:shrink-0는 이미지를 축소되지 않도록 방지).
• 다른 브레이크포인트(sm, lg, xl, 2xl)도 추가하여 더 다양한 사이즈에서 스타일을 조정할 수 있습니다.

Mobile-first (모바일 우선 접근 방식)

Tailwind CSS는 모바일 우선 접근 방식을 사용한다. 브레이크포인트가 없는 기본 유틸리티가 모바일 장치부터 모든 화면 크기에 적용된다는 뜻이다. 이후, 더 큰 화면에서는 브레이크포인트 접두어(sm, md, lg 등)를 붙여 화면 크기에 따라 스타일을 조정할 수 있다

예시

<div class="text-center sm:text-left">
  <p>모바일에서는 텍스트가 중앙 정렬되고, 큰 화면에서는 좌측 정렬됩니다.</p>
</div>

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

<div class="md:max-2xl:flex"> 
  <!-- 이 요소는 중간 크기 화면에서만(2xl 미만!) flex로 적용됩니다. -->
</div>

커스텀 브레이크포인트 설정

tailwind.config.js 파일에서 원하는 브레이크포인트를 직접 설정할 수 있습니다.

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    screens: {
      'tablet': '640px',   // 640px 이상일 때 적용
      'laptop': '1024px',  // 1024px 이상일 때 적용
      'desktop': '1280px', // 1280px 이상일 때 적용
    },
  }
}

Reference)
Tailwind CSS 공식 문서
짐코딩님 Tailwind CSS 완전 정복