Tailwind CSS には Animation ユーティリティとして、いくつかの CSS アニメーションが用意されていますが、animation-delay プロパティに関しては、ユーティリティクラスが用意されていません。
といっても、Tailwind CSS で animation-delay プロパティが使いたいシチュエーションなんてのは限られていますので、その都度、@layer ディレクティブで追加するなり、tailwind.config.js にプラグインとして必要な設定を書いてしまえば終わる話なんですが、プロジェクト間での使い回しやら考えたときに後々便利なように、汎用的なプラグインとして公開してみました。
プラグインは npm で公開しましたので、
npm i tailwindcss-animation-delay
した上で、tailwind.config.js に下記のようにプラグインを読み込む設定をしてもらえれば使用可能になります。
// tailwind.config.js
module.exports = {
theme: {
// ...
},
plugins: [
require('tailwindcss-animation-delay'),
// ...
],
};
プラグインの導入で使用できるようになるカスタムユーティリティクラスなどについては GitHub の README.md にまとめていますのでご確認ください。
実際の使用例
以前、「バーンワークス UI ライブラリ」 という名前で、Tailwind CSS を使用した日本語ウェブサイト向け UI サンプル集を作ってみましたという話をこの Blog で書きましたが、この UI ライブラリの、「読み込み中 （ローディング） 表示」 コンポーネントの一部で、今回作成したプラグインを使用しています。
