Размеры элемента

Справочник классов по умолчанию

Класс	Свойства
box-border	box-sizing: border-box;
box-content	box-sizing: content-box;

Включите границы и отступы

Используйте box-border, чтобы установить для элемента box-sizing значение border-box, указав браузеру включать границы и отступы элемента, когда вы задаете ему высоту или ширину.

Это означает, что 100px × Элемент 100px с границей 2px и отступом 4px со всех сторон будет отображаться как 100px × 100px, с внутренней областью содержимого 88px × 88px.

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

<div class="box-border h-32 w-32 p-4 border-4 ...">
  <!-- ... -->
</div>

Исключить границы и отступы

Используйте box-content, чтобы установить для элемента box-sizing значение content-box, указав браузеру добавить границы и отступы поверх указанной ширины или высоты элемента.

Это означает, что 100px × Элемент 100px с границей 2px и отступом 4px со всех сторон будет отображаться как 112px × 112px, с внутренней областью содержимого 100px × 100px.

<div class="box-content h-32 w-32 p-4 border-4 ...">
  <!-- ... -->
</div>

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

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

<div class="box-border md:box-content ...">
  <!-- ... -->
</div>

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

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

Варианты

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

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

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

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

Отключение

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

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