Настройка отступов

Используйте ключ spacing в разделе theme вашего файла tailwind.config.js, чтобы настроить масштаб отступов/размеров по умолчанию Tailwind.

module.exports = {
  theme: {
    spacing: {
      '1': '8px',
      '2': '12px',
      '3': '16px',
      '4': '24px',
      '5': '32px',
      '6': '48px',
    }
  }
}

По умолчанию масштаб отступов наследуется ядром padding, margin, width, height, maxHeight, gap, inset, space, и translate плагинами.

Расширение масштаба отступов по умолчанию

Как описано в документации по теме, если вы хотите расширить масштаб отступов по умолчанию, вы можете сделать это, используя раздел theme.extend.spacing вашего файла tailwind.config.js.

module.exports = {
  theme: {
    extend: {
      spacing: {
        '13': '3.25rem',
        '15': '3.75rem',
        '128': '32rem',
        '144': '36rem',
      }
    }
  }
}

Это сгенерирует классы, такие как p-13, m-15, и h-128, помимо всех утилити-классов для отступов/размеров Tailwind по умолчанию.

Переопределение масштаба отступов по умолчанию

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

module.exports = {
  theme: {
    spacing: {
      sm: '8px',
      md: '12px',
      lg: '16px',
      xl: '24px',
    }
  }
}

Это отключит масштаб отступов по умолчанию Tailwind и сгенерирует классы, такие как p-sm, m-md, w-lg, и h-xl, вместо этого.

Масштаб отступов по умолчанию

По умолчанию Tailwind включает в себя масштаб числовых отступов. Значения пропорциональны, поэтому 16 — это двойной отступ по сравнению с 8. Одна единица отступа равна 0.25rem, что по умолчанию эквивалентно 4px в большинстве современных браузеров.