Sizing

กำหนดขนาดของ element ด้วย w-*, h-* และ utilities อื่นๆ

Width

Class	CSS
w-0	width: 0
w-px	width: 1px
w-4	width: 1rem
w-64	width: 16rem
w-full	width: 100%
w-screen	width: 100vw
w-svw	width: 100svw
w-dvw	width: 100dvw
w-1/2	width: 50%
w-1/3	width: 33.333%
w-auto	width: auto
w-fit	width: fit-content
w-min	width: min-content
w-max	width: max-content

Height

Class	CSS
h-full	height: 100%
h-screen	height: 100vh
h-svh	height: 100svh
h-dvh	height: 100dvh
h-auto	height: auto
h-fit	height: fit-content

Tip: ใช้ dvh (dynamic viewport height) แทน vh สำหรับ mobile เพราะรองรับ address bar

---

Size (v4 ใหม่!)

ตั้ง width และ height พร้อมกัน:

<div class="size-10">width: 2.5rem; height: 2.5rem;</div>
<div class="size-full">width: 100%; height: 100%;</div>

Class	CSS
size-4	width: 1rem; height: 1rem
size-full	width: 100%; height: 100%
size-1/2	width: 50%; height: 50%

---

Min/Max Width & Height

<div class="min-h-screen">อย่างน้อยเต็มหน้าจอ</div>
<div class="max-w-xl mx-auto">Container กว้างสูงสุด 36rem</div>
<div class="min-w-0">สำหรับ flexbox overflow</div>

Class	Effect
min-h-0	min-height: 0
min-h-full	min-height: 100%
min-h-screen	min-height: 100vh
max-w-xs	max-width: 20rem
max-w-sm	max-width: 24rem
max-w-md	max-width: 28rem
max-w-lg	max-width: 32rem
max-w-xl	max-width: 36rem
max-w-2xl	max-width: 42rem
max-w-none	max-width: none

---

Aspect Ratio

<div class="aspect-video">16:9 ratio</div>
<div class="aspect-square">1:1 ratio</div>
<img class="aspect-[4/3] object-cover" src="..." />

Class	Ratio
aspect-auto	auto
aspect-square	1 / 1
aspect-video	16 / 9
aspect-[4/3]	4 / 3 (arbitrary)

---

ตัวอย่างการใช้งาน

<!-- Full-height page -->
<div class="min-h-dvh flex flex-col">
  <header class="h-16">Header</header>
  <main class="flex-1">Content</main>
  <footer class="h-20">Footer</footer>
</div>

<!-- Responsive image -->
<div class="aspect-video w-full max-w-2xl">
  <img class="size-full object-cover rounded-lg" src="..." />
</div>