📪Sizing

Height Classes

.h-{number}

Sets the height of the element.

CSS equivalent: height: {number}px;

Example usage:

<div class="h-100">This element has a height of 100 pixels.</div>

.h-{number}p

Sets the height of the element as a percentage of its parent container's height.

CSS equivalent: height: {number}%;

Example usage:

<div class="h-50p">This element has a height of 50% of its parent container's height.</div>

.h-{number}vh

Sets the height of the element as a percentage of the viewport's height.

CSS equivalent: height: {number}vh;

Example usage:

<div class="h-50vh">This element has a height of 50% of the viewport's height.</div>

Max Height Classes

.max-h-{number}vh

Sets the maximum height of the element as a percentage of the viewport's height.

CSS equivalent: max-height: {number}vh;

Example usage:

<div class="max-h-80vh">This element has a maximum height of 80% of the viewport's height.</div>

Min Height Classes

.min-h-{number}vh

Sets the minimum height of the element as a percentage of the viewport's height.

CSS equivalent: min-height: {number}vh;

Example usage:

<div class="min-h-20vh">This element has a minimum height of 20% of the viewport's height.</div>

Width Classes

.w-{number}

Sets the width of the element.

CSS equivalent: width: {number}px;

Example usage:

<div class="w-200">This element has a width of 200 pixels.</div>

.w-{number}p

Sets the width of the element as a percentage of its parent container's width.

CSS equivalent: width: {number}%;

Example usage:

<div class="w-50p">This element has a width of 50% of its parent container's width.</div>

Max Width Classes

.max-w-{number}

Sets the maximum width of the element.

CSS equivalent: max-width: {number}px;

Example usage:

<div class="max-w-300">This element has a maximum width of 300 pixels.</div>

.max-w-{number}p

Sets the maximum width of the element as a percentage of its parent container's width.

CSS equivalent: max-width: {number}%;

Example usage:

<div class="max-w-80p">This element has a maximum width of 80% of its parent container's width.</div>

Min Width Classes

.min-w-{number}

Sets the minimum width of the element.

CSS equivalent: min-width: {number}px;

Example usage:

<div class="min-w-300">This element has a minimum width of 300 pixels.</div>

.min-w-{number}p

Sets the minimum width of the element as a percentage of its parent container's width.

CSS equivalent: min-width: {number}%;

Example usage:

<div class="min-w-20p">This element has a minimum width of 20% of its parent container's width.</div>

Note:

Replace {number} with the desired numeric value in the class names to achieve the desired height or width.