# Sizing

#### Height Classes

**`.h-{number}`**

Sets the height of the element.

CSS equivalent: `height: {number}px;`

Example usage:

```html
<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:

```html
<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:

```html
<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:

```html
<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:

```html
<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:

```html
<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:

```html
<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:

```html
<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:

```html
<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:

```html
<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:

```html
<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.