📪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:
.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:
Height Classes
.h-{number}
Sets the height of the element.
CSS equivalent: height: {number}px;
Example usage:
.h-{number}p
Sets the height of the element as a percentage of its parent container.
CSS equivalent: height: {number}%;
Example usage:
Positioning Classes
.t-{number}
Sets the top position of the element.
CSS equivalent: top: {number}px;
Example usage:
.t-{number}p
Sets the top position of the element as a percentage of its parent container.
CSS equivalent: top: {number}%;
Example usage:
.b-{number}
Sets the bottom position of the element.
CSS equivalent: bottom: {number}px;
Example usage:
.b-{number}p
Sets the bottom position of the element as a percentage of its parent container.
CSS equivalent: bottom: {number}%;
Example usage:
.l-{number}
Sets the left position of the element.
CSS equivalent: left: {number}px;
Example usage:
.l-{number}p
Sets the left position of
the element as a percentage of its parent container.
CSS equivalent: left: {number}%;
Example usage:
.r-{number}
Sets the right position of the element.
CSS equivalent: right: {number}px;
Example usage:
.r-{number}p
Sets the right position of the element as a percentage of its parent container.
CSS equivalent: right: {number}%;
Example usage:
Z-Index Classes
.z-index-{number}
Sets the z-index value of the element.
CSS equivalent: z-index: {number};
Example usage:
.z-index--{number}
Sets a negative z-index value for the element.
CSS equivalent: z-index: -{number};
Example usage:
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:
.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:
.grid-col-span-{number}
Sets the number of columns the element spans in a grid container.
CSS equivalent: grid-column: span {number};
Example usage:
Spacing and Border Classes
.gap-{number}
Sets the gap between grid items or flex items.
CSS equivalent: gap: {number}px;
Example usage:
.radius-{number}
Sets the border radius of the element.
CSS equivalent: border-radius: {number}px;
Example usage:
.radius-t-r-{number}
Sets the top-right border radius of the element.
CSS equivalent: border-top-right-radius: {number}px;
Example usage:
.radius-t-l-{number}
Sets the top-left border radius of the element.
CSS equivalent: border-top-left-radius: {number}px;
Example usage:
`.radius-b
-r-{number}`
Sets the bottom-right border radius of the element.
CSS equivalent: border-bottom-right-radius: {number}px;
Example usage:
.radius-b-l-{number}
Sets the bottom-left border radius of the element.
CSS equivalent: border-bottom-left-radius: {number}px;
Example usage:
.border-{number}
Sets the border width of the element.
CSS equivalent: border-width: {number}px;
Example usage:
.border-t-{number}
Sets the top border width of the element.
CSS equivalent: border-top-width: {number}px;
Example usage:
.border-b-{number}
Sets the bottom border width of the element.
CSS equivalent: border-bottom-width: {number}px;
Example usage:
.border-l-{number}
Sets the left border width of the element.
CSS equivalent: border-left-width: {number}px;
Example usage:
.border-r-{number}
Sets the right border width of the element.
CSS equivalent: border-right-width: {number}px;
Example usage:
.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:
.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:
Other Classes
.outline-{number}
Sets the outline width of the element.
CSS equivalent: outline-width: {number}px;
Example usage:
.outline-offset-{number}
Sets the offset distance of the outline from the border edge.
CSS equivalent: outline-offset: {number}px;
Example usage:
.line-height-{number}
Sets the line height of the text content.
CSS equivalent: line-height: {number}px;
Example usage:
.rotate-x-{number}
Applies a 3D rotation around the x-axis to the element.
CSS equivalent
: transform: rotateX({number}deg);
Example usage:
.rotate-y-{number}
Applies a 3D rotation around the y-axis to the element.
CSS equivalent: transform: rotateY({number}deg);
Example usage:
.rotate-z-{number}
Applies a 3D rotation around the z-axis to the element.
CSS equivalent: transform: rotateZ({number}deg);
Example usage:
Please note that the provided examples are just for illustration purposes and you can adjust the values according to your needs.
Last updated