className 프로퍼티 분기점 함수
fucntion cls(...classnames: string[]) {
return classnames.join("");
}
<button
className={cls(
"pb-4 font-medium text-sm border-b-2",
method === "email"
? " border-orange-500 text-orange-400"
: "border-transparent hover:text-gray-400 text-gray-500"
)}
onClick={onEmailClick}
>
업로드 버튼 숨기기 => 라벨 태그 안에 놓고 hidden 속성 주기
<label>
<input className="hidden" type="upload" accept="image/*" />
</label>pointer-events-none
마우스 포인터의 이벤트를 없앨때
divide
ex) divide-y-2
=> border-bottom 대체로 사용, 마지막 요소는 border 자동 생략
flex-row-reverse, space-x-reverse
요소 가로방향으로 반전 시킬때, 요소들의 간격도 reverse 해줘야됨
inset
inset-0
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
inset-x-0
left: 0px;
right: 0px;
inset-y-0
top: 0px;
bottom: 0px;
aspect-video
=> aspect-ratio: 16/9
aspect-square, rounded-full
=> 원만들기
