Sizing

Classes for managing element sizes.

Width

Class	Description
.w-full	100% width
.w-screen	100% screen width
.w-auto	Auto width

Height

Class	Description
.h-full	100% height
.h-screen	100% screen height
.h-auto	Auto height

Examples

Просмотр

w-full (100% width)

h-32 (fixed height)

Код

<div class="flex flex-col gap-4">
  <div
    class="w-full p-4"
    style="
      background: var(--u-blue-500);
      color: #fff;
      border-radius: var(--u-rounded);
    "
  >
    <p>w-full (100% width)</p>
  </div>
  <div
    class="h-32 p-4"
    style="
      background: var(--u-green-500);
      color: #fff;
      border-radius: var(--u-rounded);
    "
  >
    <p>h-32 (fixed height)</p>
  </div>
</div>

<div class="w-full">100% width</div>
<div class="h-full">100% height</div>
<div class="w-auto">Auto width</div>