Satuan
rem
|
|
.h-1
|
height: 1rem;
|
.h-2
|
height: 2rem;
|
.h-3
|
height: 3rem;
|
.h-4
|
height: 4rem;
|
.h-5
|
height: 5rem;
|
.h-6
|
height: 6rem;
|
.h-7
|
height: 7rem;
|
.h-8
|
height: 8rem;
|
.h-9
|
height: 9rem;
|
.h-10
|
height: 10rem;
|
.h-11
|
height: 11rem;
|
.h-12
|
height: 12rem;
|
.h-13
|
height: 13rem;
|
.h-14
|
height: 14rem;
|
.h-15
|
height: 15rem;
|
.h-16
|
height: 16rem;
|
.h-17
|
height: 17rem;
|
.h-18
|
height: 18rem;
|
.h-19
|
height: 19rem;
|
.h-20
|
height: 20rem;
|
.h-21
|
height: 21rem;
|
.h-22
|
height: 22rem;
|
.h-23
|
height: 23rem;
|
.h-24
|
height: 24rem;
|
.h-25
|
height: 25rem;
|
.h-26
|
height: 26rem;
|
.h-27
|
height: 27rem;
|
.h-28
|
height: 28rem;
|
.h-29
|
height: 29rem;
|
.h-30
|
height: 30rem;
|
.h-31
|
height: 31rem;
|
.h-32
|
height: 32rem;
|
.h-33
|
height: 33rem;
|
.h-34
|
height: 34rem;
|
.h-35
|
height: 35rem;
|
.h-36
|
height: 36rem;
|
.h-37
|
height: 37rem;
|
.h-38
|
height: 38rem;
|
.h-39
|
height: 39rem;
|
.h-40
|
height: 40rem;
|
.h-41
|
height: 41rem;
|
.h-42
|
height: 42rem;
|
.h-43
|
height: 43rem;
|
.h-44
|
height: 44rem;
|
.h-45
|
height: 45rem;
|
.h-46
|
height: 46rem;
|
.h-47
|
height: 47rem;
|
.h-48
|
height: 48rem;
|
.h-49
|
height: 49rem;
|
.h-50
|
height: 50rem;
|
Satuan
%
|
|
.h-5%
|
height: 5%;
|
.h-10%
|
height: 10%;
|
.h-15%
|
height: 15%;
|
.h-20%
|
height: 20%;
|
.h-25%
|
height: 25%;
|
.h-30%
|
height: 30%;
|
.h-35%
|
height: 35%;
|
.h-40%
|
height: 40%;
|
.h-45%
|
height: 45%;
|
.h-50%
|
height: 50%;
|
.h-55%
|
height: 55%;
|
.h-60%
|
height: 60%;
|
.h-65%
|
height: 65%;
|
.h-70%
|
height: 70%;
|
.h-75%
|
height: 75%;
|
.h-80%
|
height: 80%;
|
.h-85%
|
height: 85%;
|
.h-90%
|
height: 90%;
|
.h-95%
|
height: 95%;
|
.h-100%
|
height: 100%;
|
Penggunaan utility height mirip dengan width, yaitu menggunakan class
.h-{ukuran}
untuk height dengan satuan
rem, dan
.h-{ukuran}%
untuk height dengan satuan persen (%)
<div class="bg-blue-100 radius-0.5">
<div class="h-100% bg-blue-500 p-0.5 color-white radius-0.5">100%</div>
</div>
<div class="bg-green-100 radius-0.5">
<div class="h-60% bg-green-500 p-0.5 color-white radius-t-0.5">60%</div>
</div>
<div class="bg-orange-200 radius-0.5">
<div class="h-50% bg-orange-400 p-0.5 color-white radius-t-0.5">50%</div>
</div>
<div class="bg-orange-100 radius-0.5">
<div class="h-25% bg-orange-500 p-0.5 color-white radius-t-0.5">25%</div>
</div>
<div class="bg-red-100 radius-0.5">
<div class="h-5% bg-red-500 p-0.5 color-white radius-t-0.5">5%</div>
</div>