Добавление анимаций с помощью плагинов Tailwind CSS

Вы создали чистый UI на Tailwind, но он выглядит статичным. Добавление движения кажется простой задачей — пока вы не уставитесь в пустой tailwind.config.js, размышляя, нужен ли вам плагин, keyframe или что-то совершенно другое. Вот чёткая карта ваших возможностей.

Что Tailwind предоставляет из коробки

Tailwind поставляется с четырьмя утилитами анимации, которые покрывают удивительно большое количество реальных сценариев использования:

• animate-spin — вращающиеся загрузчики и иконки
• animate-ping — бейджи уведомлений и радарные эффекты
• animate-pulse — скелетоны загрузки
• animate-bounce — индикаторы прокрутки и сигналы привлечения внимания

Для простой обратной связи о состоянии — спиннера загрузки на кнопке отправки, пульсирующего скелетона во время загрузки данных — этих встроенных анимаций Tailwind CSS часто вполне достаточно. Объедините их с утилитами переходов (transition, duration-300, ease-in-out) для состояний hover и focus, и вы сможете покрыть большинство микровзаимодействий без использования плагина. Вы можете изучить все эти утилиты в официальной документации по анимациям Tailwind.

Когда встроенных возможностей достаточно: загрузчики, скелетоны, бейджи и базовые переходы при наведении.

Когда стоит использовать плагин анимаций Tailwind

Встроенный набор имеет ограничения. Он не включает анимации появления/исчезновения, направленные слайды, перевороты или эффекты при прокрутке. Здесь плагины анимаций Tailwind занимают своё место.

tailwindcss-animate

tailwindcss-animate добавляет композируемые утилиты для появления и исчезновения:

<!-- Плавное появление с увеличением при монтировании -->
<div class="animate-in fade-in zoom-in duration-300">...</div>

<!-- Выезд вверх при закрытии -->
<div class="animate-out slide-out-to-top fade-out duration-200">...</div>

Он также предоставляет детальные настройки — delay-150, repeat-infinite, fill-mode-forwards, direction-alternate — которые позволяют настраивать анимации без написания кастомного CSS.

Однако плагин не получал новых релизов с 2023 года, поэтому совместимость с новыми версиями Tailwind может варьироваться в зависимости от вашей конфигурации. Некоторые современные стеки Tailwind v4 вместо этого используют более новые пакеты анимаций, разработанные с учётом CSS-ориентированной архитектуры фреймворка.

tailwind-animations

tailwind-animations использует другой подход: большая библиотека именованных анимаций (animate-fade-in, animate-shake, animate-heartbeat, animate-jelly и многие другие).

<div class="animate-fade-in">
  Блок с плавным появлением
</div>

Плагин также поддерживает утилиты анимации на основе прокрутки с использованием CSS-свойства animation-timeline.

<!-- Появление при прокрутке с использованием CSS View Timeline -->
<div class="timeline-view animate-fade-in-up animate-range-gradual">...</div>

Эти анимации, управляемые прокруткой, опираются на более новые возможности браузеров, такие как animation-timeline, поэтому поддержка браузерами может варьироваться в зависимости от вашей целевой аудитории.

Tailwind CSS v4 и CSS-ориентированный подход

Если вы используете Tailwind CSS v4, рекомендуемый способ добавления пользовательских анимаций — напрямую в вашем CSS с помощью @theme:

@theme {
  --animate-wiggle: wiggle 1s ease-in-out infinite;

  @keyframes wiggle {
    0%, 100% { transform: rotate(-3deg) }
    50% { transform: rotate(3deg) }
  }
}

Это делает animate-wiggle доступным как утилитный класс немедленно — без необходимости в плагине. Для разовых пользовательских анимаций это часто чище, чем установка зависимости.

Примечание о совместимости: Некоторые плагины были созданы для Tailwind v3 и могут не полностью поддерживать CSS-ориентированную архитектуру v4. Всегда проверяйте репозиторий или документацию плагина перед добавлением его в проект v4.

Не забывайте о доступности

Оборачивайте любую несущественную анимацию в motion-safe:, чтобы пользователи, предпочитающие уменьшенное движение, не пострадали:

<svg class="motion-safe:animate-spin ...">...</svg>

Вариант motion-reduce: в Tailwind работает наоборот — применяя стили только когда предпочтительно уменьшенное движение. Используйте оба варианта, чтобы обеспечить комфортный опыт для каждого пользователя.

Выбор подхода

Заключение

Начните с того, что Tailwind уже предоставляет. Четыре встроенные утилиты анимации и классы переходов обрабатывают большинство повседневных микровзаимодействий. Когда вам нужны последовательности появления/исчезновения, направленные слайды или эффекты при прокрутке, плагин вроде tailwindcss-animate или tailwind-animations может чисто интегрироваться. Если вы используете v4, попробуйте определить пользовательские токены анимации в CSS, прежде чем вообще обращаться к пакету. Какой бы путь вы ни выбрали, не забывайте учитывать медиа-запрос prefers-reduced-motion, чтобы каждый пользователь получил комфортный опыт.

Часто задаваемые вопросы

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers. Check our GitHub repo and join the thousands of developers in our community.