Краткая справка

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

Основы использования

Изменение продолжительности перехода

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

Наведите курсор на каждую кнопку, чтобы увидеть ожидаемое поведение

duration-150

duration-300

duration-700

<button class="transition duration-150 ease-in-out ...">Кнопка A</button>
<button class="transition duration-300 ease-in-out ...">Кнопка B</button>
<button class="transition duration-700 ease-in-out ...">Кнопка C</button>

Применяя условно

Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use hover:duration-150 to only apply the duration-150 utility on hover.

<div class="transition duration-0 hover:duration-150">
  <!-- ... -->
</div>

For a complete list of all available state modifiers, check out the Hover, Focus, & Other States documentation.

Контрольные точки и медиа-запросы

You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use md:duration-150 to apply the duration-150 utility at only medium screen sizes and above.

<div class="transition duration-0 md:duration-150">
  <!-- ... -->
</div>

To learn more, check out the documentation on Responsive Design, Dark Mode and other media query modifiers.


Использование пользовательских значений

Настройка вашей темы

По умолчанию Tailwind предоставляет восемь универсальных утилит для продолжительности перехода. Вы можете настроить эти значения, отредактировав theme.transitionDuration или theme.extend.transitionDuration в вашем файле tailwind.config.js.

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

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

Произвольные значения

If you need to use a one-off transition-duration value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.

<div class="duration-[2000ms]">
  <!-- ... -->
</div>

Learn more about arbitrary value support in the arbitrary values documentation.