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