How to handle Width and Height in Tailwind?

<div class="w-64">16rem width</div>
<div class="h-32">8rem height</div>
<div class="w-px">1px width</div>

<div class="w-1/2">50% width</div>
<div class="w-1/3">33.33% width</div>
<div class="w-full">100% width</div>

<div class="w-screen">100vw</div>
<div class="h-screen">100vh</div>
<div class="min-h-screen">min-height: 100vh</div>

<div class="max-w-md">Max width 28rem</div>
<div class="max-w-screen-xl">Max width 1280px</div>
<div class="min-w-0">Allow shrinking</div>

<img class="w-full h-auto" />  <!-- Responsive image -->
<div class="w-full max-w-lg mx-auto">  <!-- Centered container -->