Краткая справка

Класс
Свойства
min-w-0min-width: 0px;
min-w-1min-width: 0.25rem; /* 4px */
min-w-2min-width: 0.5rem; /* 8px */
min-w-3min-width: 0.75rem; /* 12px */
min-w-4min-width: 1rem; /* 16px */
min-w-5min-width: 1.25rem; /* 20px */
min-w-6min-width: 1.5rem; /* 24px */
min-w-7min-width: 1.75rem; /* 28px */
min-w-8min-width: 2rem; /* 32px */
min-w-9min-width: 2.25rem; /* 36px */
min-w-10min-width: 2.5rem; /* 40px */
min-w-11min-width: 2.75rem; /* 44px */
min-w-12min-width: 3rem; /* 48px */
min-w-14min-width: 3.5rem; /* 56px */
min-w-16min-width: 4rem; /* 64px */
min-w-20min-width: 5rem; /* 80px */
min-w-24min-width: 6rem; /* 96px */
min-w-28min-width: 7rem; /* 112px */
min-w-32min-width: 8rem; /* 128px */
min-w-36min-width: 9rem; /* 144px */
min-w-40min-width: 10rem; /* 160px */
min-w-44min-width: 11rem; /* 176px */
min-w-48min-width: 12rem; /* 192px */
min-w-52min-width: 13rem; /* 208px */
min-w-56min-width: 14rem; /* 224px */
min-w-60min-width: 15rem; /* 240px */
min-w-64min-width: 16rem; /* 256px */
min-w-72min-width: 18rem; /* 288px */
min-w-80min-width: 20rem; /* 320px */
min-w-96min-width: 24rem; /* 384px */
min-w-pxmin-width: 1px;
min-w-0.5min-width: 0.125rem; /* 2px */
min-w-1.5min-width: 0.375rem; /* 6px */
min-w-2.5min-width: 0.625rem; /* 10px */
min-w-3.5min-width: 0.875rem; /* 14px */
min-w-fullmin-width: 100%;
min-w-minmin-width: min-content;
min-w-maxmin-width: max-content;
min-w-fitmin-width: fit-content;

Основы использования

Установка минимальной ширины

Установите минимальную ширину элемента с помощью утилиты min-w-*.

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

Применяя условно

Tailwind позволяет условно применять служебные классы в разных состояниях с помощью модификаторов вариантов. Например, используйте hover:min-w-0, чтобы применять утилиту min-w-0 только при hover.

<div class="w-24 min-w-full hover:min-w-0">
  <!-- ... -->
</div>

Полный список всех доступных модификаторов состояния смотрите в документации Наведение, фокус и другие состояния.

Контрольные точки и медиа-запросы

Вы также можете использовать модификаторы вариантов для таргетинга на медиа-запросы, такие как реагирующие контрольные точки, темный режим, предпочтения с уменьшенным движением и многое другое. Например, используйте md:min-w-0, чтобы применить утилиту min-w-0 только на экранах среднего размера и выше.

<div class="w-24 min-w-full md:min-w-0">
  <!-- ... -->
</div>

Чтобы узнать больше, ознакомьтесь с документацией по адаптивному дизайну, темному режиму и другим модификаторам медиазапросов.


Использование пользовательских значений

Настройка вашей темы

По умолчанию минимальный масштаб ширины Tailwind представляет собой комбинацию масштаба интервала по умолчанию, а также некоторых дополнительных значений, специфичных для ширины.

Вы можете настроить масштаб интервалов, отредактировав theme.spacing или theme.extend.spacing в файле tailwind.config.js.

tailwind.config.js
module.exports = {
  theme: {
    extend: {
      spacing: {
        '128': '32rem',
      }
    }
  }
}

Чтобы настроить min-width отдельно, используйте раздел theme.minWidth вашего файла tailwind.config.js.

tailwind.config.js
module.exports = {
  theme: {
    extend: {
      minWidth: {
        '128': '32rem',
      }
    }
  }
}

Дополнительные сведения о настройке темы по умолчанию смотрите в документации настройка темы.

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

Если вам нужно использовать одноразовое min-width, которое не имеет смысла включать в вашу тему, используйте квадратные скобки для создания свойства на лету с использованием любого произвольного значения.

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

Узнайте больше о поддержке произвольных значений в документации по произвольным значениям.