📪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:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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