Задержка перехода

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

Класс	Свойства
delay-75	transition-delay: 75ms;
delay-100	transition-delay: 100ms;
delay-150	transition-delay: 150ms;
delay-200	transition-delay: 200ms;
delay-300	transition-delay: 300ms;
delay-500	transition-delay: 500ms;
delay-700	transition-delay: 700ms;
delay-1000	transition-delay: 1000ms;

Применение

Используйте утилиты delay-{amount} для управления задержкой перехода элемента.

<button class="transition delay-150 duration-300 ease-in-out ...">Наведи на меня</button>
<button class="transition delay-300 duration-300 ease-in-out ...">Наведи на меня</button>
<button class="transition delay-700 duration-300 ease-in-out ...">Наведи на меня</button>

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

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

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

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

Значения задержки

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

  // tailwind.config.js
  module.exports = {
    theme: {
      extend: {
        transitionDelay: {
+         '0': '0ms',
+         '2000': '2000ms',
        }
      }
    }
  }

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

Варианты

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

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

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

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

Отключение

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

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