Исходные координаты

Применение

Укажите источник преобразования элемента с помощью утилит origin-{keyword}.

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

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

<img class="origin-center md:origin-top ...">

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

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

Значения источника

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

  // tailwind.config.js
  module.exports = {
    theme: {
      extend: {
        transformOrigin: {
+         '24': '6rem',
+         'full': '100%',
        }
      }
    }
  }

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

Варианты

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

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

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

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

Отключение

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

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