Foxtail
Foxtailは、読み込むだけで他のCSSフレームワークでTailwind.cssのユーティリティクラスを使えるようにするCSSフレームワーク拡張スクリプトです。
BootstrapやBluma、UIkitやFoundationといった人気のCSSフレームワークに、Foxtailスクリプトを読み込むだけでTailwind.cssのユーティリティクラスが使えるようになる、というもの。何かの設定等は一切不要です。
尚、各CSSに応じたスクリプトを読み込む必要があります。例えばbulma.cssなら以下のスクリプトを読み込みます。
<script src="https://cdn.jsdelivr.net/npm/foxtailcss/dist/foxtail-bulma.min.js"></script>
bootstrapならfoxtail-bootstrap.min.jsを読み込みます。以下は動作サンプルです。
よくあるフォームです。bluma.cssにFoxtail拡張スクリプトを読み込んだ上で、下部のsubmitボタンにTailwind.cssのユーティリティクラスを付与しました。結果は上デモの通り
<button class="button is-primary font-extrabold border-transparent bg-pink-600 hover:bg-pink-500">Submit</button>
仕組みについてですが、スクリプトを読み込むとTailwind.cssのユーティリティクラスが読み込まれるのではなく、ページがロードされた時点でスキャンし、Tailwind.cssのユーティリティクラスが存在するかチェックし、存在した場合に該当するCSSのみを挿入する、というものになります。DOMは監視されているそうで、動的に挿入されても検出して挿入してくれるのだそうです。
必要なクラスのみ読み込まれるだけですし、スクリプト自体もそこまで重いものではないため、パフォーマンスを大きく損ねることなく利用できるようになっています。とはいえ、使い過ぎればそれだけ読み込まれるクラスは増えますが、まぁ多用するくらいならTailwind.cssベースにすると思いますので問題にはならないかなと思います。
他のフレームワークを使いたいけどTailwind.cssにも魅力を感じている、という方はお試しになってみてはいかがでしょうか。FoxtailはMITライセンスの元、OSSとしてソースコードが公開されています。
