Перевод

Применение

Переведите элемент, включив сначала преобразования с помощью утилиты transform, а затем указав направление перевода и расстояние с помощью утилит translate-x-{amount} и translate-y-{amount}.

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

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

<img class="transform translate-x-2 md:translate-x-8 ...">

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

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

Шкала перевода

По умолчанию Tailwind предоставляет утилиты перевода с фиксированным значением, которые соответствуют нашему шкале интервалов, а также 50% и 100% вариации для перевода относительно размера элемента.

Вы можете настроить глобальную шкалу интервалов в разделах theme.spacing или theme.extend.spacing вашего файла tailwind.config.js:

  // tailwind.config.js
  module.exports = {
    theme: {
      extend: {
        spacing: {
+         '72': '18rem',
+         '84': '21rem',
+         '96': '24rem',
        }
      }
    }
  }

Чтобы настроить масштаб перевода отдельно, используйте раздел theme.translate вашего файла tailwind.config.js.

  // tailwind.config.js
  module.exports = {
    theme: {
      extend: {
        translate: {
+         '1/7': '14.2857143%',
+         '2/7': '28.5714286%',
+         '3/7': '42.8571429%',
+         '4/7': '57.1428571%',
+         '5/7': '71.4285714%',
+         '6/7': '85.7142857%',
        }
      }
    }
  }

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

Варианты

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

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

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

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

Отключение

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

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