Минимальная ширина

Применение

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

Адаптивность

Чтобы управлять минимальной шириной элемента в определенной контрольной точке, добавьте префикс {screen}: к любой существующей утилите минимальной ширины.

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

Для получения дополнительной информации о функциях адаптивного дизайна Tailwind ознакомьтесь с документацией Адаптивного дизайна.

Кастомизация

Шкала минимальной ширины

Настройте шкалу минимальной ширины Tailwind по умолчанию в разделе theme.minWidth Вашего файла tailwind.config.js.

  // tailwind.config.js
  module.exports = {
    theme: {
      minWidth: {
+       '0': '0',
+       '1/4': '25%',
+       '1/2': '50%',
+       '3/4': '75%',
+       'full': '100%',
      }
    }
  }

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

Варианты

По умолчанию, только responsive варианты создаются для утилит min-width.

Вы можете контролировать, какие варианты создаются для утилит min-width для изменения свойства minWidth в разделе variants Вашего файла конфигурации tailwind.config.js.

Например, эта конфигурация также будет генерировать варианты hover и focus:

  // tailwind.config.js
  module.exports = {
    variants: {
      extend: {
        // ...
+       minWidth: ['hover', 'focus'],
      }
    }
  }

Отключение

Если Вы не планируете использовать в своем проекте утилиты для изменения min-width, Вы можете полностью отключить их, установив для minWidth свойство значение false в разделе corePlugins Вашего файла конфигурации:

  // tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...
+     minWidth: false,
    }
  }