Размеры

Утилиты для управления шириной, высотой, минимальными и максимальными размерами.

Ширина (width)

Класс	width
w-0	0
w-25	25%
w-50	50%
w-75	75%
w-100	100%
w-auto	auto
w-fit	fit-content
w-min	min-content
w-max	max-content
w-screen	100vw

Высота (height)

Класс	height
h-0	0
h-25	25%
h-50	50%
h-75	75%
h-100	100%
h-auto	auto
h-fit	fit-content
h-min	min-content
h-max	max-content
h-screen	100vh

Минимальные размеры

Класс	Свойство	Значение
min-w-0	min-width	0
min-w-full	min-width	100%
min-h-0	min-height	0
min-h-full	min-height	100%
min-h-screen	min-height	100vh

Максимальные размеры

Класс	Свойство	Значение
max-w-full	max-width	100%
max-w-screen	max-width	100vw
max-w-none	max-width	none
max-h-full	max-height	100%
max-h-screen	max-height	100vh
max-h-none	max-height	none

Произвольные значения (JIT)

Пакет utils-jit позволяет задавать произвольные размеры:

<div class="w-[320px]">Ширина 320px</div>
<div class="h-[200px]">Высота 200px</div>
<div class="w-[50%] h-[calc(100vh-64px)]">Вычисляемые размеры</div>

Примеры

<!-- Полная ширина контейнера -->
<div class="w-100">100% ширины</div>

<!-- Ограниченная ширина с центрированием -->
<div class="w-[960px] max-w-100 mx-auto pa-4">
  Контент страницы
</div>

<!-- Полноэкранная секция -->
<section class="w-screen min-h-screen d-flex items-center justify-center">
  Полноэкранный блок
</section>

<!-- Адаптивная карточка -->
<div class="w-100 md:w-50 lg:w-[320px]">
  Карточка
</div>