📪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.
Last updated