Tailwind CSS プラグインでアニメーションを追加する

クリーンな Tailwind UI を構築したものの、静的に感じられる。モーションの追加は簡単なはずなのに、気づけば空の tailwind.config.js を見つめながら、プラグインが必要なのか、キーフレームが必要なのか、それとも全く別のものが必要なのか悩んでいる。ここでは、選択肢を明確に整理します。

Tailwind が標準で提供するもの

Tailwind には、驚くほど多くの実用的なユースケースをカバーする4つのアニメーションユーティリティが付属しています:

• animate-spin — 回転するローダーとアイコン
• animate-ping — 通知バッジとレーダーエフェクト
• animate-pulse — スケルトンローディング画面
• animate-bounce — スクロールインジケーターと注意喚起

シンプルな状態フィードバック(送信ボタンのローディングスピナー、データ取得中のパルススケルトンなど)には、これらの組み込み Tailwind CSS アニメーションで十分なことが多いです。トランジションユーティリティ(transition、duration-300、ease-in-out)と組み合わせてホバーやフォーカス状態に使用すれば、プラグインに触れることなくほとんどのマイクロインタラクションをカバーできます。これらすべてのユーティリティは、公式の 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">
  Fade in box
</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 を使用している場合、カスタムアニメーションを追加する推奨方法は、@theme を使用して CSS 内で直接定義することです:

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

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

これにより、animate-wiggle がユーティリティクラスとして即座に利用可能になります—プラグインは不要です。一度限りのカスタムアニメーションには、依存関係をインストールするよりもこの方法がクリーンなことが多いです。

互換性に関する注意: 一部のプラグインは Tailwind v3 向けに構築されており、v4 の CSS ファーストアーキテクチャを完全にサポートしていない場合があります。v4 プロジェクトに追加する前に、必ずプラグインのリポジトリまたはドキュメントを確認してください。

アクセシビリティを忘れずに

必須ではないアニメーションは motion-safe: でラップし、モーション軽減を好むユーザーに影響を与えないようにしましょう:

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

Tailwind の motion-reduce: バリアントは逆の動作をします—モーション軽減が優先される場合にのみスタイルを適用します。両方を使用して、すべてのユーザーに快適な体験を提供しましょう。

アプローチの選択

まとめ

Tailwind が既に提供しているものから始めましょう。4つの組み込みアニメーションユーティリティとトランジションクラスは、日常的なマイクロインタラクションのほとんどを処理します。入退場シーケンス、方向性のあるスライド、スクロールトリガーの表示が必要な場合、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.