1 = 0.25rem으로 정의되어 있습니다.
1rem은 보통 브라우저 기본값에서 16px입니다.
→ 따라서 0.25rem = 4px
w-1 = 0.25rem = 4px
w-{n}: width
w-[구체적 픽셀값] 대괄호 [] 안에 px, %, rem 등 단위를 직접 넣을 수 있습니다.h-{n}: height
max-w-{size}: 최대 너비 제한 (max-w-sm, max-w-lg) <!-- 1. w,h -->
<div class="w-50 h-50 bg-blue-200">50rem * 4</div>
<div class="w-[123px] h-[123px] bg-pink-200">
[대괄호 내부에 구체적 값 작성 가능]
</div>
<div class="w-1/3 h-50 bg-green-300">비율로 지정 가능</div>
<div class="w-full">전체 너비</div>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>tailwindcss</title>
<script src="<https://cdn.tailwindcss.com>"></script>
</head>
<body>
<div class="w-10 h-10 bg-blue-500 bg-red-500"></div>
<div class="w-10 h-10 bg-red-500 bg-blue-500"></div>
<div class="w-10 h-10 bg-blue-400 bg-red-500"></div>
<div class="w-10 h-10 bg-red-500 bg-blue-400"></div>
<div class="grid grid-cols-10 gap-2">
<div class="bg-sky-50 aspect-square"></div>
<div class="bg-sky-100 aspect-square"></div>
<div class="bg-sky-200 aspect-square"></div>
<div class="bg-sky-300 aspect-square"></div>
<div class="bg-sky-400 aspect-square"></div>
<div class="bg-sky-500 aspect-square"></div>
<div class="bg-sky-600 aspect-square"></div>
<div class="bg-sky-700 aspect-square"></div>
<div class="bg-sky-800 aspect-square"></div>
<div class="bg-sky-900 aspect-square"></div>
</div>
<div class="grid grid-cols-10 gap-2">
<div class="bg-blue-50 aspect-square"></div>
<div class="bg-blue-100 aspect-square"></div>
<div class="bg-blue-200 aspect-square"></div>
<div class="bg-blue-300 aspect-square"></div>
<div class="bg-blue-400 aspect-square"></div>
<div class="bg-blue-500 aspect-square"></div>
<div class="bg-blue-600 aspect-square"></div>
<div class="bg-blue-700 aspect-square"></div>
<div class="bg-blue-800 aspect-square"></div>
<div class="bg-blue-900 aspect-square"></div>
</div>
<div class="grid grid-cols-10 gap-2">
<div class="bg-indigo-50 aspect-square"></div>
<div class="bg-indigo-100 aspect-square"></div>
<div class="bg-indigo-200 aspect-square"></div>
<div class="bg-indigo-300 aspect-square"></div>
<div class="bg-indigo-400 aspect-square"></div>
<div class="bg-indigo-500 aspect-square"></div>
<div class="bg-indigo-600 aspect-square"></div>
<div class="bg-indigo-700 aspect-square"></div>
<div class="bg-indigo-800 aspect-square"></div>
<div class="bg-indigo-900 aspect-square"></div>
</div>
<div class="grid grid-cols-10 gap-2">
<div class="bg-violet-50 aspect-square"></div>
<div class="bg-violet-100 aspect-square"></div>
<div class="bg-violet-200 aspect-square"></div>
<div class="bg-violet-300 aspect-square"></div>
<div class="bg-violet-400 aspect-square"></div>
<div class="bg-violet-500 aspect-square"></div>
<div class="bg-violet-600 aspect-square"></div>
<div class="bg-violet-700 aspect-square"></div>
<div class="bg-violet-800 aspect-square"></div>
<div class="bg-violet-900 aspect-square"></div>
</div>
</body>
</html>
https://tailwindcss.com/docs/border-style
<!-- border-radius -->
<div class="space-y-2">
<div class="w-30 h-30 bg-violet-200 rounded-sm">sm</div>
<div class="w-30 h-30 bg-violet-200 rounded-md">md</div>
<div class="w-30 h-30 bg-violet-200 rounded-lg">lg</div>
<div class="w-30 h-30 bg-violet-200 rounded-xl">xl</div>
</div>