tailwindcss-motion

tailwindcss-motionは、RomboHQで開発されたTailwind CSSプラグインです。カスタムキーフレームを記述する代わりに、utilityクラスで要素を直接アニメーションできる、シンプルかつ強力なアニメーションライブラリと説明されています。 インストールはnpmで開発依存関係として行い、tailwind.config.jsのplugins配列にプラグインを追加します。CommonJSのrequireとESMのimportの両方のスタイルが示されています。パッケージにはTypeScript定義が同梱されており、motionScaleやmotionTimingFunctionなどのテーマカスタマイズも型付けされています。 核となる考え方は、あらゆる次元をアニメーションするためのインライン構文です。例えば、motion-translate-x-in-25やmotion-opacity-in-0のようなクラス、またはmotion-preset-fadeのようなプリセットを使用することで、スライドとフェードの効果を実現できます。完全なドキュメントはdocs.rombo.co/tailwindでホストされています。 ブラウザ上で視覚的にアニメーションを作成するためのChrome拡張機能も提供されています。ループアニメーション、再利用可能なプリセットの保存、Tailwindクラス、純粋なCSS、またはFramer Motionコードとしてのエクスポートをサポートしています。 READMEには、Tailwind Playプレイグラウンド上の複数のライブ例がリンクされています。ランディングページ、チャットダイアログ、バッテリー残量低下のダイナミックアイランド、Appleのカラースウォッチ、Romboループ、絵文字アニメーションなどが含まれます。また、Romboがインタラクティブなインターフェース向けのツールを構築しているアーリーステージの企業であることにも言及し、プラグインの作成に関するブログ記事、アニメータービルダー、コミュニティによるUnoCSS移植版という追加リソースも挙げています。 リポジトリには提供されたREADMEテキストのみが含まれており、ライセンス、貢献ガイドライン、テスト設定、ベンチマークデータは資料に含まれていません。