Шкала

Справочник классов по умолчанию

Класс	Свойства
scale-0	--tw-scale-x: 0; --tw-scale-y: 0;
scale-50	--tw-scale-x: .5; --tw-scale-y: .5;
scale-75	--tw-scale-x: .75; --tw-scale-y: .75;
scale-90	--tw-scale-x: .9; --tw-scale-y: .9;
scale-95	--tw-scale-x: .95; --tw-scale-y: .95;
scale-100	--tw-scale-x: 1; --tw-scale-y: 1;
scale-105	--tw-scale-x: 1.05; --tw-scale-y: 1.05;
scale-110	--tw-scale-x: 1.1; --tw-scale-y: 1.1;
scale-125	--tw-scale-x: 1.25; --tw-scale-y: 1.25;
scale-150	--tw-scale-x: 1.5; --tw-scale-y: 1.5;
scale-x-0	--tw-scale-x: 0;
scale-x-50	--tw-scale-x: .5;
scale-x-75	--tw-scale-x: .75;
scale-x-90	--tw-scale-x: .9;
scale-x-95	--tw-scale-x: .95;
scale-x-100	--tw-scale-x: 1;
scale-x-105	--tw-scale-x: 1.05;
scale-x-110	--tw-scale-x: 1.1;
scale-x-125	--tw-scale-x: 1.25;
scale-x-150	--tw-scale-x: 1.5;
scale-y-0	--tw-scale-y: 0;
scale-y-50	--tw-scale-y: .5;
scale-y-75	--tw-scale-y: .75;
scale-y-90	--tw-scale-y: .9;
scale-y-95	--tw-scale-y: .95;
scale-y-100	--tw-scale-y: 1;
scale-y-105	--tw-scale-y: 1.05;
scale-y-110	--tw-scale-y: 1.1;
scale-y-125	--tw-scale-y: 1.25;
scale-y-150	--tw-scale-y: 1.5;

Применение

Управляйте масштабом элемента, сначала включив преобразования с помощью утилиты transform, а затем указав масштаб с помощью утилит scale-{percentage}, scale-x-{percentage} и scale-y-{percentage}.

<img class="transform scale-75 ...">
<img class="transform scale-100 ...">
<img class="transform scale-125 ...">
<img class="transform scale-150 ...">

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

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

<div class="transform scale-100 md:scale-75"></div>

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

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

Значения шкалы

По умолчанию Tailwind предоставляет десять утилит масштабирования общего назначения. Вы изменяете, добавляете или удаляете их, редактируя раздел theme.scale вашей конфигурации Tailwind.

  // tailwind.config.js
  module.exports = {
    theme: {
      scale: {
        '0': '0',
+       '25': '.25',
        '50': '.5',
        '75': '.75',
        '90': '.9',
-       '95': '.95',
        '100': '1',
-       '105': '1.05',
-       '110': '1.1',
        '125': '1.25',
        '150': '1.5',
+       '200': '2',
      }
    }
  }

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

Варианты

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

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

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

  // tailwind.config.js
  module.exports = {
    variants: {
      extend: {
        // ...
+       scale: ['active', 'group-hover'],
      }
    }
  }

Отключение

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

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