Tailwind class 정리

---

<input> 클래스 해석

 

class="peer w-full rounded-lg border border-gray-300 bg-white px-3 pt-5 pb-2 text-gray-700 placeholder-transparent focus:border-blue-500 focus:outline-none"

클래스의미

peer	label에서 input의 상태(focus, placeholder 등)를 감지할 수 있게 해주는 트리거 역할
w-full	부모 너비 100%
rounded-lg	모서리를 크게 둥글게 (radius 약 8px)
border border-gray-300	테두리 색상을 연한 회색으로 지정
bg-white	배경색 흰색
px-3 pt-5 pb-2	padding (좌우 12px, 위 20px, 아래 8px 정도)
text-gray-700	텍스트 색상을 중간 회색으로
placeholder-transparent	placeholder가 눈에 안 보이게 처리 (floating label용)
focus:border-blue-500	포커스될 때 테두리 색을 파란색으로 변경
focus:outline-none	브라우저 기본 파란 outline 제거

---

<label> 클래스 해석

 

class="absolute left-3 top-1 text-xs text-gray-400 transition-all peer-placeholder-shown:top-4 peer-placeholder-shown:text-gray-400 peer-placeholder-shown:text-sm peer-focus:top-1 peer-focus:text-xs peer-focus:text-blue-600"

클래스의미

absolute left-3 top-1	label을 input 안쪽의 왼쪽 위에 고정 위치로 배치
text-xs	label 기본 글자 크기 작게 (약 12px)
text-gray-400	기본 회색 텍스트 색상
transition-all	위치(top)나 색상(text-color) 변경 시 부드럽게 전환
peer-placeholder-shown:top-4	input이 비어 있을 때(label이 placeholder처럼 내려옴) → 아래로 이동
peer-placeholder-shown:text-gray-400	비어 있을 때 연한 회색 유지
peer-placeholder-shown:text-sm	비어 있을 때 글씨 살짝 키움 (placeholder처럼 보이게)
peer-focus:top-1	input 포커스 시 다시 위로 올라감
peer-focus:text-xs	포커스 시 글씨 작게
peer-focus:text-blue-600	포커스 시 글씨 색 파란색

---

🎨 요약 시각화

상태label 위치label 크기label 색상

입력 없음 (placeholder 상태)	아래쪽 (top-4)	text-sm	gray-400
입력 focus 시	위쪽 (top-1)	text-xs	blue-600
입력 완료 시 (값 존재)	위쪽 (top-1)	text-xs	gray-400