Поля

Добавить поле с одной стороны

Управляйте полями c одной сторонs элемента с помощью утилит p{t|r|b|l}-{size}.

Например, pt-6 добавит 1.5rem отступ к верху элемента, pr-4 добавит 1rem отступ элементу справа, pb-8 добавит 2rem отступ к низу элемента, и pl-2 добавит 0.5rem отступ элементу слева.

Добавить поля по горизонтали

Управляйте полями элемента по горизонтали с помощью утилит px-{size}.

Добавить поля по вертикали

Управляйте вертикальными полями элемента с помощью утилит py-{size}.

Добавить поля со всех сторон

Управляйте полями со всех сторон элемента с помощью утилит p-{size}.

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

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

<div class="md:py-8 ...">
  <!-- ... -->
</div>

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

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

Шкала полей

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

Если вы хотите настроить эти значения для заполнения, полей, ширины и высоты одновременно, используйте раздел theme.spacing Вашего файла tailwind.config.js.

  // tailwind.config.js
  module.exports = {
    theme: {
      spacing: {
+       sm: '8px',
+       md: '16px',
+       lg: '24px',
+       xl: '48px',
      }
    }
  }

Чтобы настроить только значения заполнения, используйте раздел theme.padding Вашего файла tailwind.config.js.

  // tailwind.config.js
  module.exports = {
    theme: {
      padding: {
+       sm: '8px',
+       md: '16px',
+       lg: '24px',
+       xl: '48px',
      }
    }
  }

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

Варианты

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

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

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

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

Отключение

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

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