Отступы

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

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

Например, mt-6 добавит 1.5rem отступ элементу сверху, mr-4 добавит 1rem отступ элементу справа, mb-8 добавит 2rem отступ элементу снизу, и ml-2 добавит 0.5rem отступ элементу слева.

Добавить горизонтальный отступ

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

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

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

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

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

Отрицательные отступы

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

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

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

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

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

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

Шкала отступов

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

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

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

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

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

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

Отрицательные значения

Если вы хотите добавить дополнительные классы отрицательных отступов (принимающие форму -m{side?}-{size}), поставьте перед ключами в Вашем файле конфигурации дефис:

  // tailwind.config.js
  module.exports = {
    theme: {
      extend: {
        margin: {
+         '-72': '-18rem',
        }
      }
    }
  }

Tailwind достаточно умен, чтобы сгенерировать такие классы, как -mx-72, когда видит тире, а не mx--72, как вы могли ожидать.

Варианты

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

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

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

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

Отключение

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

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