tailwindcss-animation-delay プラグインを Tailwind CSS v4 に対応させました
Tailwind CSS で animation-delay プロパティを簡単に使うため、animation-delay-* というユーティリティクラスを追加するプラグイン 「tailwindcss-animation-delay」 を公開していましたが、Tailwind CSS v4 でも使用可能にしました。ただし、Tailwind CSS v4 ではプラグインを使用しなくても同様の事が CSS の設定で簡単にできますのでその方法を紹介。
- 公開日
- 更新日
2021 年なのでもう 4 年近く前になりますが、Tailwind CSS で、animation-delay プロパティを簡単に使用するためのプラグイン 「tailwindcss-animation-delay」 を公開して、npm で利用できるようにしました。
詳しい話は下記の参考記事を読んでいただければと思いますが、npm では 「Weekly Downloads （週間ダウンロード回数）」 が直近でも 20,000 件くらいあってそれなりに使っていただいているようです。
なのですが、つい先日リリースされた Tailwind CSS v4 では、もうプラグインを入れてやるほどのものでもなくなりまして......
もちろん、tailwindcss-animation-delay プラグイン自体は消したりはしませんけども、Tailwind CSS v4 でプラグインなしで同じ機能を使うための設定例を書いた CSS ファイルを追加した上で、対応する Tailwind CSS のバージョンも v4 まで拡大しておきました。
基本、Tailwind CSS v4 で tailwindcss-animation-delay プラグイン同様にanimation-delay-* ユーティリティクラスが使いたい場合は、以下に説明する設定を CSS ファイルに記述するだけで終わりますので参考まで。
設定ファイルで独自のユーティリティクラスを追加
tailwindcss-animation-delay プラグインで追加されるものと全く同じanimation-delay-* ユーティリティクラスを使用したい場合、以下の設定を CSS （@import "tailwindcss"; しているファイル） に記述してください。それだけ。簡単ですね。
@import "tailwindcss";/* 以下を追加するだけ */@utility animation-delay-none { animation-delay: 0s;}@utility animation-delay-* { animation-delay: --value([*]); animation-delay: calc(--value(integer) * 1ms);}これで、まずanimation-delay-none を使用した場合はanimation-delay: 0s; という CSS が生成されます。
次に、animation-delay-{n} のような記述をすることで、{n} の数値をms に変換した CSS が生成されます。例えば、
animation-delay-75と書けばanimation-delay: 75ms;animation-delay-300と書けばanimation-delay: 300ms;
のように CSS が生成されるということです。{n} 部分には正の整数なら自由に指定できますのでプラグインよりも柔軟に使用できると思います。
さらに、animation-delay-[n] のように、[] を使用して値を記述することも可能です。例えば、
animation-delay-[1.5s]と書けばanimation-delay: 1.5s;animation-delay-[-1500ms]と書けばanimation-delay: -1500ms;
のように CSS が生成されますので、自由に値を指定できます （animation-delay プロパティは<time> データ型の値のみ有効なので、指定する値は有効な<time> データ型である必要があります）。
ちなみに、Tailwind CSS を使用したプロジェクトに、独自のカスタムスタイルを追加する方法については公式ドキュメントにまとまっていますので参考まで。
ということで、複雑なものは除き、tailwindcss-animation-delay プラグインのように単純なユーティリティクラスを足すだけでしたら Tailwind CSS v4 ではプラグイン不要になりました。Tailwind CSS v4 を使用する場合は試してみてください。
