Set a height of an element in pixels instantly by using the following height utility classes.
Class | Values |
---|---|
class="h-[value]p"
|
25 / 30 / 35 / 40 / 45 / 50 ... / 800 (step of 5) |
class="mh-[value]p"
|
100 / 125 / 150 / 200 / 225 ... / 800 (step of 25) Set max-height of an element |
class="mnh-[value]p"
|
100 / 125 / 150 / 200 / 225 ... / 800 (step of 25) Set min-height of an element |
Easily make an element as tall (relative to its parent) with the following height utilities.
Class | Values |
---|---|
class="h-[value]"
|
25 / 30 / 35 / 40 / 45 / 50 ... / 100 (step of 5) |
class="h-auto"
|
Set the height to auto |
class="mh-100"
|
Set max-height of an element to 100% |
Set a width of an element in pixels instantly by using the following width utility classes.
Class | Values |
---|---|
class="w-[value]p" class="w-sm-[value]p" class="w-md-[value]p" class="w-lg-[value]p" class="w-xl-[value]p" class="w-xxl-[value]p"
|
25 / 30 / 35 / 40 / 45 / 50 ... / 800 (step of 5) |
class="mw-[value]p"
|
25 / 50 / 75 / 100 / 125 / 150 / 200 / 225 ... / 800 (step of 25) Set max-width of an element |
class="mnw-[value]p"
|
25 / 50 / 75 / 100 / 125 / 150 / 200 / 225 ... / 800 (step of 25) Set min-width of an element |
Easily make an element as wide (relative to its parent) with the following width utilities.
Class | Values |
---|---|
class="w-[value]" class="w-sm-[value]" class="w-md-[value]" class="w-lg-[value]" class="w-xl-[value]" class="w-xxl-[value]"
|
5 / 10 / 15 / 20 / 25 / 30 / 35 / 40 / 45 / 50 ... / 100 (step of 5) |
class="w-auto"
|
Set the width to auto |
class="mw-100"
|
Set max-width of an element to 100% |
Easily make an element of equal height & width using the following utility classes.
Class | Values |
---|---|
class="d-[value]"
|
8 / 10 / 12 / 14 / 16 / 18 / 20 / 22 / 24 ... / 50 (step of 2) |
class="d-[value]"
|
54 / 58 / 62 / 66 / 70 / 74 / 78 / 82 / 86 / 90 / 94 / 98 (step of 4) |
class="d-[value]"
|
100 / 110 / 120 / 130 / 140 / 150 (step of 10) |