Tailwind basic width និង height

យើងសិក្សាមានដូចជា width, percentage,Arbitrary width, Width with viewport, 100% of container, Max width, height និង height-full screen

Width

<h1 class="text-xl font-bold">width</h1>
<div class="bg-blue-300 w">w is width and w no number is width 100</div>
<div class="bg-pink-200 w-96">w-0.5 = 2px, w-1 = 4px </div>
<div class="bg-gray-300 w-auto">w-auto</div>

percentage

w-1/4

w-1/3

w-1/2

w-1/1

w-3/4

w-[80%]

<div class="bg-blue-400 w-1/4">w-1/4 </div>
<div class="bg-gray-400 w-1/3">w-1/3</div>
<div class="bg-pink-300 w-1/2"> w-1/2</div>
<div class="bg-emerald-200 w-1/1">w-1/1</div>
<div class="bg-blue-400 w-3/4">w-3/4 </div>
<div class="bg-gray-400 w-[80%]">w-[80%]</div>

Arbitrary width

w-[250px]

w-[60%]

<h1 class="text-xl font-bold">Arbitrary width</h1>
<div class="bg-yellow-200 w-[250px]">w-[250px]</div>
<div class="bg-blue-200 w-[60%]">w-[60%]</div>

Width with viewport

w-screen

<h1 class="text-xl font-bold">Viewport</h1>
<div class="bg-pink-100 w-screen"> w-screen</div>

100% of container

w-full

<h1 class="text-xl font-bold">100% of container</h1>
<div class="bg-emerald-300 w-full"> w-full</div>

Max width

(max-w-lg mx-auto) Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<p class="bg-gray-200 max-w-lg mx-auto">
(max-w-lg mx-auto)
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
</p>

height

h-24

h-32

h-40

<div class="flex">
  <div class="bg-blue-100 h-24">h-24</div>
  <div class="bg-pink-100 h-32">h-32</div>
  <div class="bg-emerald-100 h-40">h-40</div>
</div>

height-full screen

<div class="bg-pink-200 h-screen">
        h-screen
</div>