Настройка интервала

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

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    spacing: {
      '1': '8px',
      '2': '12px',
      '3': '16px',
      '4': '24px',
      '5': '32px',
      '6': '48px',
    }
  }
}

По умолчанию масштаб интервалов наследуется параметрами от основных плагинов padding, margin, width, minWidth, maxWidth, height, minHeight, maxHeight, gap, inset, space, translate, scrollMargin и scrollPadding core plugins.

​

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

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

/** @type {import('tailwindcss').Config} */
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:

/** @type {import('tailwindcss').Config} */
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.