注目キーワード
  1. Wordpress
  2. テーマ
  3. プラグイン
  4. SEO
  5. 集客

Tailwind.cssのユーティリティクラスをBootstrapやBlumaなど他のCSSフレームワークで使えるようにする拡張スクリプト・「Foxtail」


目次

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を読み込みます。以下は動作サンプルです。

Ads


よくあるフォームです。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としてソースコードが公開されています。

Foxtail

#wordpress #ワードプレス #SEO #集客

「かちびと.net」を閲覧する

最新情報をチェックしよう!
>WordPressに関連する情報まとめ

WordPressに関連する情報まとめ

ブログ / ホームページの価値の最大化をさせるCMS、WordPress(ワードプレス)。フリーのブログとは違い、いくらか敷居の高い印象がありますが、一つ一つクリアにしてみるときっとあなたもWordPressのパワーの恩恵に預かれると思います。当サイトを見て、まずはトライしてみましょう!

CTR IMG