Размеры: ширина, высота, min и max

Задаём ширину и высоту элементов и ограничиваем их с помощью min/max.

Ширина и высота

Ширина — w-*, высота — h-*. Значения берутся из той же шкалы интервалов, что и отступы:

<div class="w-32 h-32 bg-blue-200"></div>

Получится квадрат 128×128 пикселей со светло-голубым фоном (32 по шкале = 8rem = 128px).

Особые значения ширины

Кроме шкалы есть удобные ключевые слова и дроби:

Например, две колонки по половине ширины:

<div class="flex">
  <div class="w-1/2">Левая</div>
  <div class="w-1/2">Правая</div>
</div>

Каждая колонка займёт ровно половину контейнера.

min и max — ограничения

Фиксированная ширина плохо тянется на разных экранах. Чаще нужно «не больше» или «не меньше». Для этого max-w-* и min-w-*, аналогично для высоты:

<article class="w-full max-w-2xl">
  Длинный текст статьи...
</article>

Блок займёт всю доступную ширину, но не растянется шире max-w-2xl (примерно 672px). На широком мониторе строки не станут неудобно длинными, а на телефоне займут весь экран. Это классический приём для читаемого текста.

Контейнерные размеры max-w

У max-w-* своя шкала «читаемых» ширин: max-w-sm, max-w-md, max-w-lg, max-w-2xl, max-w-4xl и так далее. Чем «больше» суффикс, тем шире предел. Их удобно комбинировать с mx-auto, чтобы получить центрированный блок ограниченной ширины — основу почти любой страницы:

<div class="max-w-4xl mx-auto px-4">
  Контент страницы
</div>

Контент не будет шире ~896px, встанет по центру, а px-4 добавит поля по бокам на узких экранах.

Итог

• w-* и h-* задают размеры; есть дроби (w-1/2) и ключевые слова (w-full, h-screen).
• max-w-* ограничивает ширину сверху — спасает длинный текст на широких экранах.
• max-w-* + mx-auto + px-* — стандартный центрированный контейнер страницы.