> For the complete documentation index, see [llms.txt](https://codennerd.gitbook.io/cxcss/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://codennerd.gitbook.io/cxcss/product-guides/temporary.md).

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


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://codennerd.gitbook.io/cxcss/product-guides/temporary.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.