Utilities for width, min-width and max-width properties.
Numerical widths
Using w-[number], you can control the width size of an element.
You can use numerical values which will be converted into a multiple of 0.25rem (can be changed in config → units) for consistent and precise sizing.
For example, "w-5" will give you a width of 1.25rem.
You can use Arbitrary values like "w-(16px)" or "w-(2em)" as well.
Learn more about Arbitrary Styling
Percentage widths
Using w-[precentage], you can control the width size of an element with percentage values.
You can use any percentage values such as "w-28%".
You can also use "w-full" instead of w-100% and "w-half" instead of w-50%.
Viewport
Using w-[precentage]vw or w-[precentage]vh, you can set the width size of an element to the width of viewport.
<!-- vw = viewport width -->
<div class="w-100vw">
...
</div>
<!-- vh = viewport height -->
<div class="w-100vh">
...
</div>
You can use any percentage values such as "w-36vw".
You can also use "w-fullvw" instead of w-100vw and "w-fullvh" instead of w-100vh.
Min Width
Using min-w-[number|percentage], you can control the minimum width of an element.
min-width overrides width if it is greater than width (e.g., min-w-80 overrides w-64).
You can use both numerical and percentage values such as "min-w-12" or "min-w-25%".
You can use Arbitrary values like "min-w-(16px)" or "min-w-(2em)" as well.
Learn more about Arbitrary Styling
Max Width
Using max-w-[number|percentage], you can control the minimum width of an element.
This element will be 20rem(w-80) wide, unless the max-width is lower, in which case it will be as wide as the max-width.
← w-80 →
You can use both numerical and percentage values such as "max-w-12" or "max-w-25%".
You can use Arbitrary values like "max-w-(16px)" or "max-w-(2em)" as well.
Learn more about Arbitrary Styling