Tailwind CSS 크기 단위 정리 - width와 height 기초

1. 기본 크기 단위

Tailwind는 spacing scale을 기반으로 너비(width)와 높이(height)를 지정할 수 있다.

<div class="w-96 ...">w-96</div>
<div class="w-80 ...">w-80</div>
<div class="w-64 ...">w-64</div>
<div class="w-48 ...">w-48</div>
<div class="w-40 ...">w-40</div>
<div class="w-32 ...">w-32</div>
<div class="w-24 ...">w-24</div>

<div class="h-96 ...">h-96</div>
<div class="h-80 ...">h-80</div>
<div class="h-64 ...">h-64</div>
<div class="h-48 ...">h-48</div>
<div class="h-40 ...">h-40</div>
<div class="h-32 ...">h-32</div>
<div class="h-24 ...">h-24</div>

숫자 단위는 4px(=0.25rem) 스케일을 따른다.'

---

2. 컨테이너 스케일 사용

Tailwind는 미리 정의된 컨테이너 단위(width scale)를 제공한다.
이 단위는 디자인 시스템에 맞춘 고정된 폭을 설정할 때 유용하다.

<div class="w-3xs ...">w-3xs</div>
<div class="w-2xs ...">w-2xs</div>
<div class="w-xs ...">w-xs</div>
<div class="w-sm ...">w-sm</div>
<div class="w-md ...">w-md</div>
<div class="w-lg ...">w-lg</div>
<div class="w-xl ...">w-xl</div>

---

3. 퍼센트 단위

부모 요소의 크기 기준으로 비율을 지정할 수 있다.

<div class="flex ...">
  <div class="w-1/2 ...">w-1/2</div>
  <div class="w-1/2 ...">w-1/2</div>
</div>
<div class="flex ...">
  <div class="w-1/3 ...">w-1/3</div>
  <div class="w-2/3 ...">w-2/3</div>
</div>
<div class="flex ...">
  <div class="w-1/4 ...">w-1/4</div>
  <div class="w-3/4 ...">w-3/4</div>
</div>
<div class="flex ...">
  <div class="w-1/5 ...">w-1/5</div>
  <div class="w-4/5 ...">w-4/5</div>
</div>
<div class="flex ...">
  <div class="w-1/6 ...">w-1/6</div>
  <div class="w-5/6 ...">w-5/6</div>
</div>
<div class="w-full ...">w-full</div>

---

4. 전체 채우기

요소를 가득 채우고 싶을때 다음 클래스를 사용한다.

<div>
	<div class="w-screen">w-screen</div>
    <div class="w-sm">
       <div class="w-full">w-full</div>
    </div>
</div>

클래스	설명
w-full / h-full	부모 요소 기준 100%
w-screen / h-screen	뷰포트 전체 기준

---

5. 사용자 정의 값

Tailwind의 사전 정의 단위 외에도 임의의 값을 지정할 수 있다.

<div class="w-[300px] h-[150px] bg-teal-300">고정 px</div>
<div class="w-[50%] h-[10rem] bg-orange-300">커스텀 단위</div>

• [] 안에 직접 CSS 단위를 입력할 수 있다.
• css 변수도 함께 사용할 수 있다.

  <div class="w-(--my-width) ...">
   <!-- ... -->
  </div>

---

6. 반응형 디자인

반응형 디자인을 위해 Tailwind는 다양한 **접두사(prefix)** 를 제공한다.

예를 들어, md:는 중간 크기 이상에서만 적용된다.

<div class="w-1/2 md:w-full ...">
  <!-- ... -->
</div>