width

Примеры

Базовый пример

Используйте утилиты w-<number> такие как w-24 и w-64 для установки элемента на фиксированную ширину на основе шкалы отступов:

<div class="w-96 ...">w-96</div><div class="w-80 ...">w-80</div><div class="w-64 ...">w-64</div><div class="w-48 ...">w-48</div><div class="w-40 ...">w-40</div><div class="w-32 ...">w-32</div><div class="w-24 ...">w-24</div>

Использование процентов

Используйте утилиты w-full или w-<fraction> такие как w-1/2 и w-2/5 для установки элемента на процентную ширину:

<div class="flex ...">  <div class="w-1/2 ...">w-1/2</div>  <div class="w-1/2 ...">w-1/2</div></div><div class="flex ...">  <div class="w-2/5 ...">w-2/5</div>  <div class="w-3/5 ...">w-3/5</div></div><div class="flex ...">  <div class="w-1/3 ...">w-1/3</div>  <div class="w-2/3 ...">w-2/3</div></div><div class="flex ...">  <div class="w-1/4 ...">w-1/4</div>  <div class="w-3/4 ...">w-3/4</div></div><div class="flex ...">  <div class="w-1/5 ...">w-1/5</div>  <div class="w-4/5 ...">w-4/5</div></div><div class="flex ...">  <div class="w-1/6 ...">w-1/6</div>  <div class="w-5/6 ...">w-5/6</div></div><div class="w-full ...">w-full</div>

Использование шкалы контейнера

Используйте утилиты такие как w-sm и w-xl для установки элемента на фиксированную ширину на основе шкалы контейнера:

<div class="w-xl ...">w-xl</div><div class="w-lg ...">w-lg</div><div class="w-md ...">w-md</div><div class="w-sm ...">w-sm</div><div class="w-xs ...">w-xs</div><div class="w-2xs ...">w-2xs</div><div class="w-3xs ...">w-3xs</div>

Соответствие вьюпорту

Используйте утилиту w-screen для растягивания элемента на всю ширину вьюпорта:

<div class="w-screen">  <!-- ... --></div>

Альтернативно, вы можете соответствовать ширине большого, малого или динамического вьюпорта, используя утилиты w-lvw, w-svw и w-dvw.

Сброс ширины

Используйте утилиту w-auto для удаления назначенной ширины элемента при определенном условии, например, на определенном брейкпоинте:

<div class="w-full md:w-auto">  <!-- ... --></div>

Установка ширины и высоты

Используйте утилиты такие как size-px, size-4 и size-full для одновременной установки ширины и высоты элемента:

<div class="size-16 ...">size-16</div><div class="size-20 ...">size-20</div><div class="size-24 ...">size-24</div><div class="size-32 ...">size-32</div><div class="size-40 ...">size-40</div>

Использование пользовательского значения

Используйте синтаксис w-[<value>] , чтобы задать width на основе полностью пользовательского значения:

<div class="w-[5px] ...">  <!-- ... --></div>

Для переменных CSS вы также можете использовать синтаксис: w-(<custom-property>)

<div class="w-(--my-width) ...">  <!-- ... --></div>

Это просто сокращение, w-[var(<custom-property>)] которое автоматически добавляет функцию var().

Адаптивный дизайн

Префикс a width утилита с вариантом контрольной точки, например md:, чтобы применить утилиту только при размерах экрана medium и выше:

<div class="w-1/2 md:w-full ...">  <!-- ... --></div>

Подробнее об использовании вариантов читайте в документации по вариантам.

Кастомизация вашей темы

Утилиты w-<number> and size-<number> управляются переменной темы --spacing, которую можно настроить в вашей собственной теме:

@theme {  --spacing: 1px; }

Подробнее о настройке шкалы интервалов читайте в документации по переменным темы.