Tailwind CSS 정리

기본 문법

• p-4 → padding

• text-sm → 글자 크기

• bg-zinc-900 → 배경색

• hover:bg-zinc-800

• md:p-8

• disabled:opacity-40

가장 자주 쓰는 뼈대 예시

<div class="mx-auto max-w-md rounded-xl bg-white p-6 shadow">
	<h2 class="text-xl font-semibold text-zinc-900">제목</h2>
		<p class="mt-2 text-sm text-zinc-600">설명 텍스트</p>
		<button class="mt-4 rounded-lg bg-zinc-900 px-4 py-2 text-white hover:bg-zinc-800">
	    버튼
		</button>
</div>

• max-w-* + mx-auto → 가운데 정렬 레이아웃

• rounded-* + shadow → 카드 형태

• px/py → 버튼 패딩 기본 조합

Spacing (margin / padding)

Padding

• p-* : 전체

• px / py : 가로 / 세로

• pt pr pb pl : 방향 지정

<div class="p-4">전체 padding</div>
<div class="px-6 py-3">좌우 / 위아래</div>
<div class="pt-6">위쪽만</div>

Margin

• m-* : 전체

• mx / my : 가로 / 세로

• mt mr mb ml : 방향 지정

<div class="mt-6">위 여백</div>
<div class="mx-auto">가운데 정렬</div>

mx-auto는 레이아웃에서 거의 필수로 사용합니다.

요소 간 간격

• 요소 간격: space-y-4 / space-x-2

<div class="space-y-4">
	<div>아이템</div>
	<div>아이템</div>
</div>

자식 요소 사이 간격을 자동으로 관리해줘서 margin을 개별로 주지 않아도 되는 점이 편합니다.

Layout (flex / grid)

Flex

<div class="flex items-center justify-between">
	<span>왼쪽</span>
	<button>오른쪽</button>
</div>

• flex : flex 켜기

• items-center : 세로 가운데

• justify-between : 가로 양끝

• gap-2, gap-4 : 요소 간 간격

• flex-col : 세로로 쌓기

• flex-wrap : 줄바꿈

Grid

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

• grid-cols-2/3/4... : 열 개수

• col-span-2 : 칸 병합

Sizing (width/height)

• w-10 h-10 : 고정 사이즈

• w-full : 100%

• w-fit : 내용만큼

• max-w-md : 최대 너비 제한

<div class="w-full max-w-lg">반응형 카드</div>
<div class="w-10 h-10">고정 크기</div>

Typography (글자)

<h1 class="text-2xl font-bold">제목</h1>
<p class="text-sm text-zinc-600 leading-relaxed">
  본문 텍스트
</p>

Colors (색)

<div class="bg-zinc-900 text-white">어두운 배경</div>
<div class="bg-zinc-100 text-zinc-900">밝은 배경</div>

• 숫자가 작을수록 연함

• 숫자가 클수록 진함

• 배경: 100 ~ 200

• 텍스트: 700 ~ 900

Border / Radius / Shadow

Border

• border : 1px border

• border-2 : 두께

• border-zinc-200 : 색

• border-t : 위만

Radius

• rounded-md, rounded-lg, rounded-xl, rounded-full

Shadow

• shadow-sm, shadow, shadow-md, shadow-lg

<div class="border border-zinc-200 rounded-xl shadow-sm p-4">
  카드 UI
</div>

Background / Gradient

• bg-* 로 단색

• bg-gradient-to-r from-* to-* 이런 식으로 그라데이션

<div class="bg-gradient-to-r from-zinc-900 to-zinc-700 text-white p-6 rounded-xl">
  그라데이션
</div>

Position (relative/absolute) + z-index

<div class="relative">
	<span class="absolute right-2 top-2 text-xs">뱃지</span>
</div>

• relative : 기준 잡기

• absolute : 절대 위치

• top-2 right-2 : 위치값

• z-10 : 앞으로

State (hover/focus/disabled) 패턴

<button class="bg-zinc-900 text-white px-4 py-2 rounded-lg
               hover:bg-zinc-800
               focus:outline-none focus:ring-2 focus:ring-zinc-400
               disabled:opacity-40 disabled:cursor-not-allowed">
  버튼
</button>

• hover:* : 마우스 올렸을 때

• focus:* : 포커스

• disabled:* : disabled일 때

Responsive (sm/md/lg/xl)

<div class="p-4 md:p-8 lg:p-12">
  화면이 커질수록 패딩 증가
</div>

<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
  모바일 1열, md부터 2열
</div>

Tailwind 값 표기 규칙

1) 스케일 값

2) 임의 값(Arbitrary value)도 가능

<div class="w-[340px]"></div>
<div class="mt-[18px]"></div>
<div class="bg-[#111827]"></div>

마무리