Размеры

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

Ширина (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>