Just-in-Time: Следующее поколение Tailwind CSS
Tailwind CSS на GitHubTailwind CSS в Telegram

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

Настройка интервала и шкалы размеров по умолчанию для Вашего проекта.

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

// tailwind.config.js
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:

// 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:

// 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.

NameSizePixels
00px0px
px1px1px
0.50.125rem2px
10.25rem4px
1.50.375rem6px
20.5rem8px
2.50.625rem10px
30.75rem12px
3.50.875rem14px
41rem16px
51.25rem20px
61.5rem24px
71.75rem28px
82rem32px
92.25rem36px
102.5rem40px
112.75rem44px
123rem48px
143.5rem56px
164rem64px
205rem80px
246rem96px
287rem112px
328rem128px
369rem144px
4010rem160px
4411rem176px
4812rem192px
5213rem208px
5614rem224px
6015rem240px
6416rem256px
7218rem288px
8020rem320px
9624rem384px