# Temporary for Mudaththir

Certainly! Here's the documentation for the additional classnames you provided:

#### 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.

CSS equivalent: `width: {number}%;`

Example usage:

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

**`.max-w-{number}p`**

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

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

Example usage:

```html
<div class="max-w-75p">This element has a maximum width of 75% of its parent container.</div>
```

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

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

Example usage:

```html
<div class="min-w-25p">This element has a minimum width of 25% of its parent container.</div>
```

#### Height Classes

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

Sets the height of the element.

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

Example usage:

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

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

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

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

Example usage:

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

#### Positioning Classes

**`.t-{number}`**

Sets the top position of the element.

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

Example usage:

```html
<div class="t-50">This element is positioned 50 pixels from the top.</div>
```

**`.t-{number}p`**

Sets the top position of the element as a percentage of its parent container.

CSS equivalent: `top: {number}%;`

Example usage:

```html
<div class="t-25p">This element is positioned 25% from the top of its parent container.</div>
```

**`.b-{number}`**

Sets the bottom position of the element.

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

Example usage:

```html
<div class="b-30">This element is positioned 30 pixels from the bottom.</div>
```

**`.b-{number}p`**

Sets the bottom position of the element as a percentage of its parent container.

CSS equivalent: `bottom: {number}%;`

Example usage:

```html
<div class="b-10p">This element is positioned 10% from the bottom of its parent container.</div>
```

**`.l-{number}`**

Sets the left position of the element.

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

Example usage:

```html
<div class="l-20">This element is positioned 20 pixels from the left.</div>
```

**`.l-{number}p`**

Sets the left position of

the element as a percentage of its parent container.

CSS equivalent: `left: {number}%;`

Example usage:

```html
<div class="l-15p">This element is positioned 15% from the left of its parent container.</div>
```

**`.r-{number}`**

Sets the right position of the element.

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

Example usage:

```html
<div class="r-25">This element is positioned 25 pixels from the right.</div>
```

**`.r-{number}p`**

Sets the right position of the element as a percentage of its parent container.

CSS equivalent: `right: {number}%;`

Example usage:

```html
<div class="r-30p">This element is positioned 30% from the right of its parent container.</div>
```

#### Z-Index Classes

**`.z-index-{number}`**

Sets the z-index value of the element.

CSS equivalent: `z-index: {number};`

Example usage:

```html
<div class="z-index-3">This element has a z-index of 3.</div>
```

**`.z-index--{number}`**

Sets a negative z-index value for the element.

CSS equivalent: `z-index: -{number};`

Example usage:

```html
<div class="z-index--2">This element has a negative z-index of -2.</div>
```

#### Grid Classes

**`.grid-{number}-cols-auto`**

Sets the number of auto-sized columns in a grid container.

CSS equivalent: `grid-template-columns: repeat({number}, auto);`

Example usage:

```html
<div class="grid-3-cols-auto">This grid container has 3 auto-sized columns.</div>
```

**`.grid-{number}-cols-1fr`**

Sets the number of columns with a fraction unit of 1fr in a grid container.

CSS equivalent: `grid-template-columns: repeat({number}, 1fr);`

Example usage:

```html
<div class="grid-4-cols-1fr">This grid container has 4 columns with a fraction unit of 1fr each.</div>
```

**`.grid-col-span-{number}`**

Sets the number of columns the element spans in a grid container.

CSS equivalent: `grid-column: span {number};`

Example usage:

```html
<div class="grid-col-span-2">This element spans 2 columns in a grid container.</div>
```

#### Spacing and Border Classes

**`.gap-{number}`**

Sets the gap between grid items or flex items.

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

Example usage:

```html
<div class="gap-10">This container has a gap of 10 pixels between its items.</div>
```

**`.radius-{number}`**

Sets the border radius of the element.

CSS equivalent: `border-radius: {number}px;`

Example usage:

```html
<div class="radius-5">This element has a border radius of 5 pixels.</div>
```

**`.radius-t-r-{number}`**

Sets the top-right border radius of the element.

CSS equivalent: `border-top-right-radius: {number}px;`

Example usage:

```html
<div class="radius-t-r-8">This element has a top-right border radius of 8 pixels.</div>
```

**`.radius-t-l-{number}`**

Sets the top-left border radius of the element.

CSS equivalent: `border-top-left-radius: {number}px;`

Example usage:

```html
<div class="radius-t-l-8">This element has a top-left border radius of 8 pixels.</div>
```

**\`.radius-b**

-r-{number}\`

Sets the bottom-right border radius of the element.

CSS equivalent: `border-bottom-right-radius: {number}px;`

Example usage:

```html
<div class="radius-b-r-8">This element has a bottom-right border radius of 8 pixels.</div>
```

**`.radius-b-l-{number}`**

Sets the bottom-left border radius of the element.

CSS equivalent: `border-bottom-left-radius: {number}px;`

Example usage:

```html
<div class="radius-b-l-8">This element has a bottom-left border radius of 8 pixels.</div>
```

**`.border-{number}`**

Sets the border width of the element.

CSS equivalent: `border-width: {number}px;`

Example usage:

```html
<div class="border-2">This element has a border width of 2 pixels.</div>
```

**`.border-t-{number}`**

Sets the top border width of the element.

CSS equivalent: `border-top-width: {number}px;`

Example usage:

```html
<div class="border-t-1">This element has a top border width of 1 pixel.</div>
```

**`.border-b-{number}`**

Sets the bottom border width of the element.

CSS equivalent: `border-bottom-width: {number}px;`

Example usage:

```html
<div class="border-b-1">This element has a bottom border width of 1 pixel.</div>
```

**`.border-l-{number}`**

Sets the left border width of the element.

CSS equivalent: `border-left-width: {number}px;`

Example usage:

```html
<div class="border-l-1">This element has a left border width of 1 pixel.</div>
```

**`.border-r-{number}`**

Sets the right border width of the element.

CSS equivalent: `border-right-width: {number}px;`

Example usage:

```html
<div class="border-r-1">This element has a right border width of 1 pixel.</div>
```

**`.border-x-{number}`**

Sets the left and right border width of the element.

CSS equivalent: `border-left-width: {number}px; border-right-width: {number}px;`

Example usage:

```html
<div class="border-x-1">This element has left and right border width of 1 pixel each.</div>
```

**`.border-y-{number}`**

Sets the top and bottom border width of the element.

CSS equivalent: `border-top-width: {number}px; border-bottom-width: {number}px;`

Example usage:

```html
<div class="border-y-1">This element has top and bottom border width of 1 pixel each.</div>
```

#### Other Classes

**`.outline-{number}`**

Sets the outline width of the element.

CSS equivalent: `outline-width: {number}px;`

Example usage:

```html
<div class="outline-2">This element has an outline width of 2 pixels.</div>
```

**`.outline-offset-{number}`**

Sets the offset distance of the outline from the border edge.

CSS equivalent: `outline-offset: {number}px;`

Example usage:

```html
<div class="outline-offset-4">This element has an outline offset of 4 pixels.</div>
```

**`.line-height-{number}`**

Sets the line height of the text content.

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

Example usage:

```html
<div class="line-height-24">This text has a line height of 24 pixels.</div>
```

**`.rotate-x-{number}`**

Applies a 3D rotation around the x-axis to the element.

CSS equivalent

: `transform: rotateX({number}deg);`

Example usage:

```html
<div class="rotate-x-45">This element is rotated 45 degrees around the x-axis.</div>
```

**`.rotate-y-{number}`**

Applies a 3D rotation around the y-axis to the element.

CSS equivalent: `transform: rotateY({number}deg);`

Example usage:

```html
<div class="rotate-y-90">This element is rotated 90 degrees around the y-axis.</div>
```

**`.rotate-z-{number}`**

Applies a 3D rotation around the z-axis to the element.

CSS equivalent: `transform: rotateZ({number}deg);`

Example usage:

```html
<div class="rotate-z-180">This element is rotated 180 degrees around the z-axis.</div>
```

Please note that the provided examples are just for illustration purposes and you can adjust the values according to your needs.