2장: 레이아웃과 구조

v4 설치 및 기본 설정

v4 변경사항 — tailwind.config.js + @tailwind 지시어 방식이 CSS 기반 설정으로 전환됐다.

# Vite 기반 프로젝트 (권장)
npm install tailwindcss @tailwindcss/vite

// vite.config.js
import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [tailwindcss()],
})

/* src/index.css — 단 한 줄로 전체 임포트 */
@import "tailwindcss";

v3에서 쓰던 @tailwind base; @tailwind components; @tailwind utilities; 세 줄은 더 이상 필요 없다.

---

2-1. Flexbox로 레이아웃 구축하기

Flexbox는 1차원 레이아웃(가로 또는 세로 한 방향)을 다루는 CSS 모델이다. Tailwind v4에서 Flexbox 유틸리티 자체는 v3와 거의 동일하지만, 새로운 논리 속성(logical properties) 유틸리티가 추가됐다.

플렉스 컨테이너 활성화

<div class="flex">...</div>


<div class="inline-flex">...</div>

플렉스 방향 (flex-direction)

<div class="flex flex-row gap-4">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>


<div class="flex flex-col gap-4">
  <div>A</div>
  <div>B</div>
</div>

플렉스 줄바꿈 (flex-wrap)

<div class="flex flex-wrap gap-2">
  <div class="w-32">item 1</div>
  <div class="w-32">item 2</div>
  <div class="w-32">item 3</div>
</div>


<div class="flex flex-nowrap">...</div>

주축 정렬 (justify-content)

<nav class="flex justify-between items-center px-6 py-4">
  <span class="font-bold">Logo</span>
  <ul class="flex gap-6">
    <li>Home</li>
    <li>About</li>
    <li>Contact</li>
  </ul>
</nav>

교차축 정렬 (align-items)

<div class="flex items-center gap-2">
  <svg class="size-5">...</svg>
  <span>텍스트</span>
</div>

v4 신규 — size-5 는 w-5 h-5 를 동시에 적용하는 축약 유틸리티다. v4에서 추가됐다.

개별 아이템 정렬 (align-self)

<div class="flex items-start h-32">
  <div>기본(start)</div>
  <div class="self-center">나만 가운데</div>
  <div class="self-end">나만 끝</div>
</div>

플렉스 확장·축소

<div class="flex">
  <div class="w-32">고정</div>
  <div class="flex-1">나머지 공간 전부</div>
  <div class="w-32">고정</div>
</div>


<div class="flex">
  <div class="grow">확장됨</div>
  <div class="shrink-0">축소 안 됨</div>
</div>

실전 패턴

카드 그리드 (Flex wrap)

<div class="flex flex-wrap gap-4">
  <div class="w-64 rounded-xl bg-white shadow p-4">카드 1</div>
  <div class="w-64 rounded-xl bg-white shadow p-4">카드 2</div>
  <div class="w-64 rounded-xl bg-white shadow p-4">카드 3</div>
</div>

화면 전체 높이 레이아웃 (sticky footer)

<div class="flex flex-col min-h-screen">
  <header class="bg-gray-900 text-white p-4">헤더</header>
  <main class="flex-1 p-6">컨텐츠</main>
  <footer class="bg-gray-100 p-4 text-center">푸터</footer>
</div>

수평·수직 중앙 정렬

<div class="flex items-center justify-center min-h-screen">
  <div class="bg-white rounded-2xl shadow-xl p-8">
    가운데 정렬된 카드
  </div>
</div>

---

2-2. Grid 시스템

CSS Grid는 2차원 레이아웃(가로 + 세로 동시)을 다룬다. Tailwind v4에서 Grid 유틸리티는 v3와 동일하고, 임의 값(arbitrary value) 지원이 더 자연스러워졌다.

기본 그리드

<div class="grid grid-cols-3 gap-4">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

열·행 병합 (span)

<div class="grid grid-cols-4 gap-4">
  
  <div class="col-span-2 bg-blue-100">넓은 아이템</div>
  <div>보통</div>
  <div>보통</div>

  
  <div class="col-start-2 col-end-4">2열에서 4열까지</div>
</div>

행 제어

<div class="grid grid-rows-3 grid-flow-col gap-4 h-48">
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
</div>

반응형 그리드

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
  <div class="bg-white rounded-xl shadow p-4">카드 A</div>
  <div class="bg-white rounded-xl shadow p-4">카드 B</div>
  <div class="bg-white rounded-xl shadow p-4">카드 C</div>
  <div class="bg-white rounded-xl shadow p-4">카드 D</div>
  <div class="bg-white rounded-xl shadow p-4">카드 E</div>
  <div class="bg-white rounded-xl shadow p-4">카드 F</div>
</div>

auto-fit / auto-fill (임의 값)

grid-cols-[repeat(auto-fit,minmax(200px,1fr))] 패턴으로 열 수를 자동 계산할 수 있다.

<div class="grid grid-cols-[repeat(auto-fit,minmax(200px,1fr))] gap-4">
  <div class="bg-slate-100 p-4 rounded">아이템</div>
  <div class="bg-slate-100 p-4 rounded">아이템</div>
  <div class="bg-slate-100 p-4 rounded">아이템</div>
</div>

복잡한 레이아웃 (named areas)

<div class="grid gap-4
  [grid-template-areas:'header_header''sidebar_main''footer_footer']
  grid-cols-[200px_1fr]">
  <header class="[grid-area:header] bg-gray-800 text-white p-4">헤더</header>
  <aside class="[grid-area:sidebar] bg-gray-100 p-4">사이드바</aside>
  <main class="[grid-area:main] p-4">메인 콘텐츠</main>
  <footer class="[grid-area:footer] bg-gray-200 p-4">푸터</footer>
</div>

---

2-3. 간격과 정렬

여백(margin)과 패딩(padding)

패턴: {속성}{방향}-{크기}

크기 척도: 기본 단위는 0.25rem (= 4px). 4 = 1rem = 16px.

<div class="p-6 m-4 rounded-2xl shadow-md bg-white">
  <h2 class="mb-2 text-xl font-bold">제목</h2>
  <p class="mb-4 text-gray-600">설명 텍스트</p>
  <button class="px-4 py-2 bg-blue-500 text-white rounded-lg">
    버튼
  </button>
</div>

v4 신규 — 논리 속성 유틸리티가 추가됐다. ms-* (margin-inline-start), me-* (margin-inline-end), ps-*, pe-* — RTL 레이아웃 지원에 활용한다.

<div dir="rtl">
  <div class="ms-4"></div>
</div>

자식 요소 간 간격 (space-between)

space-x-*, space-y-* 는 자식 요소 사이에 margin을 추가한다.

<ul class="space-y-2">
  <li class="bg-gray-50 p-3 rounded">항목 1</li>
  <li class="bg-gray-50 p-3 rounded">항목 2</li>
  <li class="bg-gray-50 p-3 rounded">항목 3</li>
</ul>

gap vs space: Grid·Flex 컨테이너에서는 gap-* 사용을 권장한다. space-*는 단순 블록 요소에 유용하다.

텍스트 정렬

<p class="text-left">왼쪽 정렬</p>
<p class="text-center">가운데 정렬</p>
<p class="text-right">오른쪽 정렬</p>
<p class="text-justify">양쪽 정렬</p>

위치(position)와 z-index

<div class="relative w-16 h-16">
  <img src="..." class="rounded-full size-16" alt="avatar" />
  <span class="absolute -top-1 -right-1 size-5 bg-green-400 rounded-full border-2 border-white"></span>
</div>


<header class="fixed top-0 left-0 right-0 z-50 bg-white shadow">
  ...
</header>


<aside class="sticky top-4 h-fit">...</aside>

오버플로우

<ul class="h-64 overflow-y-auto border rounded">
  <li class="p-2">항목...</li>
</ul>


<p class="overflow-hidden text-ellipsis whitespace-nowrap max-w-xs">
  아주 긴 텍스트가 여기에 들어갑니다...
</p>

---

2-4. v4 레이아웃 관련 신규 유틸리티

size-* (width + height 동시 설정)

<div class="size-10 bg-blue-500 rounded-full"></div>
<img class="size-16 rounded-full object-cover" src="..." alt="..." />

inset-* (top/right/bottom/left 동시 설정)

<div class="fixed inset-0 bg-black/50"></div>


<div class="absolute inset-x-0 bottom-0">하단 전체 너비 바</div>

field-sizing (v4 신규)

텍스트 입력창이 내용에 따라 자동 크기 조절된다.

<textarea class="field-sizing-content border rounded p-2 resize-none">
  내용에 맞게 높이 자동 조절
</textarea>

---

2-5. v4 커스텀 스페이싱

v3에서는 tailwind.config.js에서 설정했다. v4에서는 CSS 파일 내 @theme으로 처리한다.

/* src/index.css */
@import "tailwindcss";

@theme {
  --spacing-18: 4.5rem;   /* p-18, m-18, w-18 등 자동 생성 */
  --spacing-88: 22rem;
  --spacing-128: 32rem;
}

<div class="p-18 w-128">...</div>

---

핵심 정리

• Flex: 1차원(가로 or 세로), flex → flex-row/col → justify/items/gap
• Grid: 2차원, grid → grid-cols-N → col-span-N → gap
• 간격: p-*(내부), m-*(외부), gap-*(자식 사이)
• v4 신규: size-*, 논리 속성(ms-*, me-*), field-sizing
• v4 설정: tailwind.config.js → CSS 내 @theme